HTML and CSS Reference
In-Depth Information
display: block;
height: 0;
overflow: hidden;
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Using both pseudo-elements prevents the problem of inconsistent margin collapsing
while using the clearfix class.
Nicolas Gallagher, in 2011, found an alternative way that reduces the lines of code
necessary for the clearfix class if our target browsers are IE6 and higher and
other modern browsers, as he explains in his article at
micro-clearfix-hack/ . Nicolas' code is given in the following code snippet:
.cf:after {
content: " ";
display: table;
.cf:after {
clear: both;
* For IE 6/7 only
* Include this rule to trigger hasLayout and
contain floats.
.cf {
*zoom: 1;
In this method, using display: table would create an anonymous table cell
(more information on what this means is available in the specification at
TR/CSS2/tables.html#anonymous-boxes ) within the pseudo-element, which pre-
Search WWH ::

Custom Search