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:

<div style="clear:both"><!-- this clears all previous floats --></div>

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

<div class="container clearfix">
    <div class="content">other content stuff...</div>
    <div class="sidebar">Sidebar stuff...</div>
</div>

• 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:

/* Assuming this HTML structure:

	<div class="clear">
		<div class="floated"></div>
		<div class="floated"></div>
		<div class="floated"></div>
	</div>*/
.clear:before,
.clear:after 
{
    content: " ";
    display: table;
}

.clear:after 
{
    clear: both;
}