What is a clearfix

Defining the Clearfix

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.
  • position:absolute/fixed
  • float:left/right.
• 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:

[pastacode lang=”markup” manual=”%3Cdiv%20style%3D%22clear%3Aboth%22%3E%3C!–%20this%20clears%20all%20previous%20floats%20–%3E%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

• 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).

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22container%20clearfix%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Eother%20content%20stuff…%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22sidebar%22%3ESidebar%20stuff…%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

• 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

CSS :

This excellent CSS clear fix uses :before and :after pseudo-elements of the container to perform the clear:

[pastacode lang=”markup” manual=”%2F*%20Assuming%20this%20HTML%20structure%3A%0A%0A%09%3Cdiv%20class%3D%22clear%22%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%3C%2Fdiv%3E*%2F%0A.clear%3Abefore%2C%0A.clear%3Aafter%20%0A%7B%0A%20%20%20%20content%3A%20%22%20%22%3B%0A%20%20%20%20display%3A%20table%3B%0A%7D%0A%0A.clear%3Aafter%20%0A%7B%0A%20%20%20%20clear%3A%20both%3B%0A%7D%0A” message=”html code” highlight=”” provider=”manual”/]