The clearfix allows a container to wrap its floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.
There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.
If you want support for older browsers, it's best to use this clearfix :
***
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
***
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
***
In SCSS, you could use the following technique :
***
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
***
If you don't care about supporting older browsers, there's a shorter version :
***
.clearfix:after {
content:"";
display:table;
clear:both;
}
***