“Clearfix” Code Snippet & what the hell is it !

Share Now

A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements.

A clearfix is performed as follows:

.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}

Or, if you don’t require IE<8 support, the following is fine too:

.clearfix:after {
content: "";
display: table;
clear: both;
}

visualizing

clearfix-code-snippet-nmh47

Important Articles On Clearfix:
1. What is a clearfix?
2. All About Floats
3. Details On CSS Clearfix & Float

Picture of Nahid Mahamud

Nahid Mahamud

Web Developer | Graphic Designer | WordPress & Woo-commerce Expert