Defining the Clearfix
- 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
- All HTML elements (div, p, ul, li, a, etc…) are essentially a box, and can contain other boxes.
- A bigger box with more content (images, text, video, etc…) will make it’s parent box expand. Unless it’s taken out of the “flow of the document”
Explanation of CSS clearfix :
- Only two CSS declarations do that.
- The parent essentially “forgets” that it contains children boxes and shrinks to only take up as much space as it needs.
- If you assign the parent box a background color and float or absolutely position all it’s children boxes, then you’ll see no color at all as your parent box has essentially collapsed completely
- Give the parent element a class of “clearfix” after having put the amazing clearfix CSS code in your stylesheet.
- Give the parent element a width of anything & overflow:hidden.
- That strive to keep presentation in CSS & content in HTML.
- However, this won’t work if it contains something like a drop down menu as the overflow:hidden would hide the drop down.
- Float the parent too
- You’ll have to deal with a clear:both at some point, but you can keep passing it on by keep floating a parent till you get to a point when you can clear it all.
- Clearfix is a “hack” used to contain/enclose floats without structural markup.
- In short, it is a sophisticated/elegant way to do the same thing as this:
- but without including that markup in the document.
- The magic relies in the use of ::after (a pseudo-element)
- clearfix uses ::after to generate content (via the content property), then style that content to clear previous floats.
- Because this method does not work in IE (< 8) clearfix relies on haslayout .
- To make IE behave (giving a layout to a box assures that it will contain floats).
- Unfortunately, doing so creates very different constructs across browsers (see also new “block-formatting context“).
Clearfix will be responsible for:
- creating different margin boxes
- collapsing margins differently across browsers
- clearing floats differently across browsers (not children, but siblings)
- Clearfix is actually used to fix the issue when a parent div or block element contains floating children.
- Without clearfix the browser will not take into account the height of floated children when displaying the parent.
- So as an example, if you had a parent block with a background color that contained a floated child, the parent block would appear to stop behind the child or even above it.
- Adding the clearfix class to the parent ensures that the parent completely wraps the floated children.
How to use a Clearfix?
- When applying classes to your HTML elements you should be mindful of which elements require a clearfix.
- Any HTML element will have floated child elements will require a clearfix.
- You can do this by adding the class clearfix to your existing classes ( assuming you have access to editing those classes).
- HTML classes can accept more than one class by separating them with a space. That means the container will accept CSS rules from both .container and .clearfix
This excellent CSS clear fix uses :before and :after pseudo-elements of the container to perform the clear: