What methods of ‘clearfix’ can I use? - css

I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
There seem to be numerous methods of fixing the clear bug in Firefox:
<br clear="all"/>
overflow:auto
overflow:hidden
In my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects.
Also, IE7 apparently shouldn't suffer from this problem due to its incorrect behaviour, but in my situation it's suffering the same as Firefox.
Which method currently available to us is the most robust?

Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.
The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:
css flexbox
css grid
Modern Clearfix Solutions
Container with overflow: auto;
The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.
Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.
Note: The floated element is an img tag in this example, but could be any html element.
Clearfix Reloaded
Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.
.container::after {
content: "";
display: block;
clear: both;
}
This is the most modern version of the clearfix.
⋮
⋮
Older Clearfix Solutions
The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.
Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.
They are listed roughly in chronological order.
"Beat That ClearFix", a clearfix for modern browsers
Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:
.container::after {
content: "";
display: table;
clear: both;
}
This solution does not support for IE 6/7 …on purpose!
Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."
Micro Clearfix
The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Overflow Property
This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
While this works... it is not ideal to use hacks.
PIE: Easy Clearing Method
This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Element using "clear" property
The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:
<br style="clear: both" /> <!-- So dirty! -->
Drawbacks
It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
It adds html markup without necessarily adding any semantic value.
It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
It makes code difficult to work with for others as they may have to write more hacks to work around it.
In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.

What problems are we trying to solve?
There are two important considerations when floating stuff:
Containing descendant floats. This means that the element in question makes itself tall enough to wrap all floating descendants. (They don't hang outside.)
Insulating descendants from outside floats. This means that descendants inside of an element should be able to use clear: both and have it not interact with floats outside the element.
Block formatting contexts
There's only one way to do both of these. And that is to establish a new block formatting context. Elements that establish a block formatting context are an insulated rectangle in which floats interact with each other. A block formatting context will always be tall enough to visually wrap its floating descendants, and no floats outside of a block formatting context may interact with elements inside. This two-way insulation is exactly what you want. In IE, this same concept is called hasLayout, which can be set via zoom: 1.
There are several ways to establish a block formatting context, but the solution I recommend is display: inline-block with width: 100%. (Of course, there are the usual caveats with using width: 100%, so use box-sizing: border-box or put padding, margin, and border on a different element.)
The most robust solution
Probably the most common application of floats is the two-column layout. (Can be extended to three columns.)
First the markup structure.
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
And now the CSS.
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
Try it yourself
Go to JS Bin to play around with the code and see how this solution is built from the ground up.
Traditional clearfix methods considered harmful
The problem with the traditional clearfix solutions is that they use two different rendering concepts to achieve the same goal for IE and everyone else. In IE they use hasLayout to establish a new block formatting context, but for everyone else they use generated boxes (:after) with clear: both, which does not establish a new block formatting context. This means things won't behave the same in all situations. For an explanation of why this is bad, see Everything you Know about Clearfix is Wrong.

The newest standard, as used by Inuit.css and Bourbon - two very widely used and well-maintained CSS/Sass frameworks:
.btcf:after {
content:"";
display:block;
clear:both;
}
Notes
Keep in mind that clearfixes are essentially a hack for what flexbox layouts can now provide in a much easier and smarter way. CSS floats were originally designed for inline content to flow around - like images in a long textual article - and not for grid layouts and the like. Unless you're specifically targeting old (not Edge) Internet Explorer, your target browsers support flexbox, so it's worth the time to learn.
This doesn't support IE7. You shouldn't be supporting IE7. Doing so continues to expose users to unfixed security exploits and makes life harder for all other web developers, as it reduces the pressure on users and organisations to switch to safer modern browsers.
This clearfix was announced and explained by Thierry Koblentz in July 2012. It sheds unnecessary weight from Nicolas Gallagher's 2011 micro-clearfix. In the process, it frees a pseudo-element for your own use. This has been updated to use display: block rather than display: table (again, credit to Thierry Koblentz).

I recommend using the following, which is taken from http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}

The overflow property can be used to clear floats with no additional mark-up:
.container { overflow: hidden; }
This works for all browsers except IE6, where all you need to do is enable hasLayout (zoom being my preferred method):
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html

I've found a bug in the official CLEARFIX-Method:
The DOT doesn't have a font-size.
And if you set the height = 0 and the first Element in your DOM-Tree has the class "clearfix" you'll allways have a margin at the bottom of the page of 12px :)
You have to fix it like this:
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
It's now part of the YAML-Layout ... Just take a look at it - it's very interesting!
http://www.yaml.de/en/home.html

This is quite a tidy solution:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
It's known to work in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
Including the :before selector is not necessary to clear the floats,
but it prevents top-margins from collapsing in modern browsers. This
ensures that there is visual consistency with IE 6/7 when zoom:1 is
applied.
From http://nicolasgallagher.com/micro-clearfix-hack/

Clearfix from bootstrap:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}

I just use :-
.clear:after{
clear: both;
content: "";
display: block;
}
Works best and compatible with IE8+ :)

Given the huge amount of replies I was not gonna post. However, this method may help someone, as it did help me.
Stay way from floats whenever possible
It's worth to mention, I avoid floats like Ebola. There are many reasons and I am not alone; Read Rikudo answer about what is a clearfix and you'll see what I mean. In his own words: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
There are other good (and sometimes better) options out there other than floats. As technology advances and improves, flexbox (and other methods) are going to be widely adopted and floats will become just a bad memory. Maybe a CSS4?
Float misbehavior and failed clears
First off, sometimes, you may think that you are safe from floats until your lifesaver is punctured and your html flow starts to sink:
In the codepen http://codepen.io/omarjuvera/pen/jEXBya below, the practice of clearing a float with <div classs="clear"></div> (or other element) is common but frown upon and anti-semantic.
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
However, just when you thought your float is sail worthy...boom! As the screen size becomes smaller and smaller you see weird behaviors in like the graphic below (Same http://codepen.io/omarjuvera/pen/jEXBya):
Why should you care?
Roughly, about 80% (or more) of the devices used are mobile devices with small screens. Desktop computers/laptops are no longer king.
It does not end there
This is not the only problem with floats. There are many, but in this example, some may say all you have to do is to place your floats in a container. But as you can see in the codepen and graphic, that is not the case. It apparently made things worst:
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
As for the result?
It's the *** same!
Least you know, you'll start a CSS party, inviting all kinds of selectors and properties to the party; making a bigger mess of your CSS than what you started with. Just to fix your float.
CSS Clearfix to the rescue
This simple and very adaptable piece of CSS is a beauty and a "savior":
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
That's it! It really works without breaking semantics and did I mention it works?:
From the same sample...HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
Now we no longer need <div classs="clear"></div> <!-- Acts as a wall --> and keep the semantic police happy. This is not the only benefit. This clearfix is responsive to any screen size without the use of #media in it's simplest form. In other words, it will keep your float container in check and preventing floodings. Lastly, it provides support for old browsers all in one small karate chop =)
Here's the clearfix again
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}

I always float the main sections of my grid and apply clear: both; to the footer. That doesn't require an extra div or class.

honestly; all solutions seem to be a hack to fix a rendering bug ... am i wrong?
i've found <br clear="all" /> to be the easiest, simplest. seeing class="clearfix" everywhere can't stroke the sensibilities of someone who objects to extraneous markeup elements, can it? you're just painting the problem on a different canvas.
i also use the display: hidden solution, which is great and requires no extra class declarations or html markup ... but sometimes you need the elements to overflow the container, for eg. pretty ribbons and sashes

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

A new display value seems to the job in one line.
display: flow-root;
From the W3 spec: "The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents."
Information:
https://www.w3.org/TR/css-display-3/#valdef-display-flow-root
https://www.chromestatus.com/feature/5769454877147136
※As shown in the link above, support is currently limited so fallback support like below may be of use:
https://github.com/fliptheweb/postcss-flow-root

With SASS, the clearfix is:
#mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
and it's used like:
.container {
#include clearfix;
}
if you want the new clearfix:
#mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}

With LESS (http://lesscss.org/), one can create a handy clearfix helper:
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
And then use it with problematic containers, for example:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}

Using overflow:hidden/auto and height for ie6 will suffice if the floating container has a parent element.
Either one of the #test could work, for the HTML stated below to clear floats.
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
In cases when this refuses to work with ie6, just float the parent to clear float.
#test {
float: left; // using float to clear float
width: 99%;
}
Never really needed any other kind of clearing yet. Maybe it's the way I write my HTML.

I have tried all these solutions, a big margin will be added to <html> element automatically when I use the code below:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
Finally, I solved the margin problem by adding font-size: 0; to the above CSS.

I'd float #content too, that way both columns contain floats. Also because it will allow you to clear elements inside #content without clearing the side bar.
Same thing with the wrapper, you'd need to make it a block formatting context to wrap the two columns.
This article mentions a few triggers you can use:
block formatting contexts.

A clearfix is a way for an element to automatically clear after itself,
so that you don't need to add additional markup.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
Normally you would need to do something as follows:
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
With clearfix, you only need to
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Why just trying to use css hack to do what 1 line of HTML do the job. And why not to use semantic html tu put break to return to the line?
Fo me is realy better to use :
<br style="clear:both" />
And if you don't want any style in your html you just have to use class for your break
and put .clear { clear:both; } in your CSS.
Advantage of this:
Semantic use of html for return to the line
If no CSS load it will be working
No need extra CSS code and Hack
no need to simulate the br with CSS, it's already exist in HTML

Assuming you're using this HTML structure:
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
Here's the CSS that I would use:
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
I use this set all the time and it works fine for me, even in IE6.

Unlike other clearfixes, here is an open-ended one without containers
Other clearfixes either require the floated element to be in a well marked off container or need an extra, semantically empty <div>. Conversely, clear separation of content and markup requires a strict CSS solution to this problem.
The mere fact that one needs to mark off the end of a float, does not allow for unattended CSS typesetting.
If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a "clearfix" is encountered. For example, the clearfix might be set by a new heading.
This is why I use the following clearfix with new headings:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
This solution gets used extensively on my website to solve the problem: The text next to a floated miniature is short and the top-margin of the next clearing object is not respected.
It also prevents any manual intervention when automatically generating PDFs from the site.
Here is an example page.

I always use the micro-clearfix :
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
In Cascade Framework I even apply it by default on block level elements. IMO, applying it by default on block level elements gives block level elements more intuitive behavior than their traditonal behavior. It also made it a lot easier for me to add support for older browsers to Cascade Framework (which supports IE6-8 as well as modern browsers).

You could also put this in your CSS:
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
And add class "cb" to your parent div:
<div id="container" class="cb">
You will not need to add anything else to your original code...

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>

Have you tried this:
<div style="clear:both;"/>
I haven't had any problems with this method.

My Favourite Method is to create a clearfix class in my css / scss document as below
.clearfix{
clear:both;
}
And then call it in my html document as shown below
<html>
<div class="div-number-one">
Some Content before the clearfix
</div>
<!-- Let's say we need to clearfix Here between these two divs --->
<div class="clearfix"></div>
<div class="div-number-two">
Some more content after the clearfix
</div>
</html>

It is so simple clearfix clears the issue by when we using the float properties inside the div element.If we use two div elements one as float:left; and other one as float:right; we can use clearfix for the parent of the two div element. If we refuse to use clearfix unnecessary spaces fill with contents below and site structure will be broken.

Related

Why is there content: " " after and before many classes in bootstrap? [duplicate]

I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
There seem to be numerous methods of fixing the clear bug in Firefox:
<br clear="all"/>
overflow:auto
overflow:hidden
In my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects.
Also, IE7 apparently shouldn't suffer from this problem due to its incorrect behaviour, but in my situation it's suffering the same as Firefox.
Which method currently available to us is the most robust?
Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.
The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:
css flexbox
css grid
Modern Clearfix Solutions
Container with overflow: auto;
The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.
Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.
Note: The floated element is an img tag in this example, but could be any html element.
Clearfix Reloaded
Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.
.container::after {
content: "";
display: block;
clear: both;
}
This is the most modern version of the clearfix.
⋮
⋮
Older Clearfix Solutions
The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.
Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.
They are listed roughly in chronological order.
"Beat That ClearFix", a clearfix for modern browsers
Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:
.container::after {
content: "";
display: table;
clear: both;
}
This solution does not support for IE 6/7 …on purpose!
Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."
Micro Clearfix
The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Overflow Property
This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
While this works... it is not ideal to use hacks.
PIE: Easy Clearing Method
This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Element using "clear" property
The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:
<br style="clear: both" /> <!-- So dirty! -->
Drawbacks
It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
It adds html markup without necessarily adding any semantic value.
It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
It makes code difficult to work with for others as they may have to write more hacks to work around it.
In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.
What problems are we trying to solve?
There are two important considerations when floating stuff:
Containing descendant floats. This means that the element in question makes itself tall enough to wrap all floating descendants. (They don't hang outside.)
Insulating descendants from outside floats. This means that descendants inside of an element should be able to use clear: both and have it not interact with floats outside the element.
Block formatting contexts
There's only one way to do both of these. And that is to establish a new block formatting context. Elements that establish a block formatting context are an insulated rectangle in which floats interact with each other. A block formatting context will always be tall enough to visually wrap its floating descendants, and no floats outside of a block formatting context may interact with elements inside. This two-way insulation is exactly what you want. In IE, this same concept is called hasLayout, which can be set via zoom: 1.
There are several ways to establish a block formatting context, but the solution I recommend is display: inline-block with width: 100%. (Of course, there are the usual caveats with using width: 100%, so use box-sizing: border-box or put padding, margin, and border on a different element.)
The most robust solution
Probably the most common application of floats is the two-column layout. (Can be extended to three columns.)
First the markup structure.
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
And now the CSS.
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
Try it yourself
Go to JS Bin to play around with the code and see how this solution is built from the ground up.
Traditional clearfix methods considered harmful
The problem with the traditional clearfix solutions is that they use two different rendering concepts to achieve the same goal for IE and everyone else. In IE they use hasLayout to establish a new block formatting context, but for everyone else they use generated boxes (:after) with clear: both, which does not establish a new block formatting context. This means things won't behave the same in all situations. For an explanation of why this is bad, see Everything you Know about Clearfix is Wrong.
The newest standard, as used by Inuit.css and Bourbon - two very widely used and well-maintained CSS/Sass frameworks:
.btcf:after {
content:"";
display:block;
clear:both;
}
Notes
Keep in mind that clearfixes are essentially a hack for what flexbox layouts can now provide in a much easier and smarter way. CSS floats were originally designed for inline content to flow around - like images in a long textual article - and not for grid layouts and the like. Unless you're specifically targeting old (not Edge) Internet Explorer, your target browsers support flexbox, so it's worth the time to learn.
This doesn't support IE7. You shouldn't be supporting IE7. Doing so continues to expose users to unfixed security exploits and makes life harder for all other web developers, as it reduces the pressure on users and organisations to switch to safer modern browsers.
This clearfix was announced and explained by Thierry Koblentz in July 2012. It sheds unnecessary weight from Nicolas Gallagher's 2011 micro-clearfix. In the process, it frees a pseudo-element for your own use. This has been updated to use display: block rather than display: table (again, credit to Thierry Koblentz).
I recommend using the following, which is taken from http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
The overflow property can be used to clear floats with no additional mark-up:
.container { overflow: hidden; }
This works for all browsers except IE6, where all you need to do is enable hasLayout (zoom being my preferred method):
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html
I've found a bug in the official CLEARFIX-Method:
The DOT doesn't have a font-size.
And if you set the height = 0 and the first Element in your DOM-Tree has the class "clearfix" you'll allways have a margin at the bottom of the page of 12px :)
You have to fix it like this:
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
It's now part of the YAML-Layout ... Just take a look at it - it's very interesting!
http://www.yaml.de/en/home.html
This is quite a tidy solution:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
It's known to work in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
Including the :before selector is not necessary to clear the floats,
but it prevents top-margins from collapsing in modern browsers. This
ensures that there is visual consistency with IE 6/7 when zoom:1 is
applied.
From http://nicolasgallagher.com/micro-clearfix-hack/
Clearfix from bootstrap:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
I just use :-
.clear:after{
clear: both;
content: "";
display: block;
}
Works best and compatible with IE8+ :)
Given the huge amount of replies I was not gonna post. However, this method may help someone, as it did help me.
Stay way from floats whenever possible
It's worth to mention, I avoid floats like Ebola. There are many reasons and I am not alone; Read Rikudo answer about what is a clearfix and you'll see what I mean. In his own words: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
There are other good (and sometimes better) options out there other than floats. As technology advances and improves, flexbox (and other methods) are going to be widely adopted and floats will become just a bad memory. Maybe a CSS4?
Float misbehavior and failed clears
First off, sometimes, you may think that you are safe from floats until your lifesaver is punctured and your html flow starts to sink:
In the codepen http://codepen.io/omarjuvera/pen/jEXBya below, the practice of clearing a float with <div classs="clear"></div> (or other element) is common but frown upon and anti-semantic.
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
However, just when you thought your float is sail worthy...boom! As the screen size becomes smaller and smaller you see weird behaviors in like the graphic below (Same http://codepen.io/omarjuvera/pen/jEXBya):
Why should you care?
Roughly, about 80% (or more) of the devices used are mobile devices with small screens. Desktop computers/laptops are no longer king.
It does not end there
This is not the only problem with floats. There are many, but in this example, some may say all you have to do is to place your floats in a container. But as you can see in the codepen and graphic, that is not the case. It apparently made things worst:
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
As for the result?
It's the *** same!
Least you know, you'll start a CSS party, inviting all kinds of selectors and properties to the party; making a bigger mess of your CSS than what you started with. Just to fix your float.
CSS Clearfix to the rescue
This simple and very adaptable piece of CSS is a beauty and a "savior":
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
That's it! It really works without breaking semantics and did I mention it works?:
From the same sample...HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
Now we no longer need <div classs="clear"></div> <!-- Acts as a wall --> and keep the semantic police happy. This is not the only benefit. This clearfix is responsive to any screen size without the use of #media in it's simplest form. In other words, it will keep your float container in check and preventing floodings. Lastly, it provides support for old browsers all in one small karate chop =)
Here's the clearfix again
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
I always float the main sections of my grid and apply clear: both; to the footer. That doesn't require an extra div or class.
honestly; all solutions seem to be a hack to fix a rendering bug ... am i wrong?
i've found <br clear="all" /> to be the easiest, simplest. seeing class="clearfix" everywhere can't stroke the sensibilities of someone who objects to extraneous markeup elements, can it? you're just painting the problem on a different canvas.
i also use the display: hidden solution, which is great and requires no extra class declarations or html markup ... but sometimes you need the elements to overflow the container, for eg. pretty ribbons and sashes
.clearFix:after {
content: "";
display: table;
clear: both;
}
A new display value seems to the job in one line.
display: flow-root;
From the W3 spec: "The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents."
Information:
https://www.w3.org/TR/css-display-3/#valdef-display-flow-root
https://www.chromestatus.com/feature/5769454877147136
※As shown in the link above, support is currently limited so fallback support like below may be of use:
https://github.com/fliptheweb/postcss-flow-root
With SASS, the clearfix is:
#mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
and it's used like:
.container {
#include clearfix;
}
if you want the new clearfix:
#mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
With LESS (http://lesscss.org/), one can create a handy clearfix helper:
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
And then use it with problematic containers, for example:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
Using overflow:hidden/auto and height for ie6 will suffice if the floating container has a parent element.
Either one of the #test could work, for the HTML stated below to clear floats.
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
In cases when this refuses to work with ie6, just float the parent to clear float.
#test {
float: left; // using float to clear float
width: 99%;
}
Never really needed any other kind of clearing yet. Maybe it's the way I write my HTML.
I have tried all these solutions, a big margin will be added to <html> element automatically when I use the code below:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
Finally, I solved the margin problem by adding font-size: 0; to the above CSS.
I'd float #content too, that way both columns contain floats. Also because it will allow you to clear elements inside #content without clearing the side bar.
Same thing with the wrapper, you'd need to make it a block formatting context to wrap the two columns.
This article mentions a few triggers you can use:
block formatting contexts.
A clearfix is a way for an element to automatically clear after itself,
so that you don't need to add additional markup.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
Normally you would need to do something as follows:
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
With clearfix, you only need to
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
Why just trying to use css hack to do what 1 line of HTML do the job. And why not to use semantic html tu put break to return to the line?
Fo me is realy better to use :
<br style="clear:both" />
And if you don't want any style in your html you just have to use class for your break
and put .clear { clear:both; } in your CSS.
Advantage of this:
Semantic use of html for return to the line
If no CSS load it will be working
No need extra CSS code and Hack
no need to simulate the br with CSS, it's already exist in HTML
Assuming you're using this HTML structure:
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
Here's the CSS that I would use:
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
I use this set all the time and it works fine for me, even in IE6.
Unlike other clearfixes, here is an open-ended one without containers
Other clearfixes either require the floated element to be in a well marked off container or need an extra, semantically empty <div>. Conversely, clear separation of content and markup requires a strict CSS solution to this problem.
The mere fact that one needs to mark off the end of a float, does not allow for unattended CSS typesetting.
If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a "clearfix" is encountered. For example, the clearfix might be set by a new heading.
This is why I use the following clearfix with new headings:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
This solution gets used extensively on my website to solve the problem: The text next to a floated miniature is short and the top-margin of the next clearing object is not respected.
It also prevents any manual intervention when automatically generating PDFs from the site.
Here is an example page.
I always use the micro-clearfix :
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
In Cascade Framework I even apply it by default on block level elements. IMO, applying it by default on block level elements gives block level elements more intuitive behavior than their traditonal behavior. It also made it a lot easier for me to add support for older browsers to Cascade Framework (which supports IE6-8 as well as modern browsers).
You could also put this in your CSS:
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
And add class "cb" to your parent div:
<div id="container" class="cb">
You will not need to add anything else to your original code...
#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>
Have you tried this:
<div style="clear:both;"/>
I haven't had any problems with this method.
My Favourite Method is to create a clearfix class in my css / scss document as below
.clearfix{
clear:both;
}
And then call it in my html document as shown below
<html>
<div class="div-number-one">
Some Content before the clearfix
</div>
<!-- Let's say we need to clearfix Here between these two divs --->
<div class="clearfix"></div>
<div class="div-number-two">
Some more content after the clearfix
</div>
</html>
It is so simple clearfix clears the issue by when we using the float properties inside the div element.If we use two div elements one as float:left; and other one as float:right; we can use clearfix for the parent of the two div element. If we refuse to use clearfix unnecessary spaces fill with contents below and site structure will be broken.

IE7 cleafix not working

I am having issues with IE7 and float clearing on this page:
https://dev.editionpatrickfrey.com/de/books/miss-martin-guggisberg
I am using the Sass pie-clearfix(); mixin and tried all possible other clearfixes without success. What is the problem here?
The ClearFix below may be applied to a Parent of floated children and or as an element below floated elements. This should cover IE6 - IE10.
.clear:before,
.clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.clear {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
I personally use this ClearFix, but to find out more about this ClearFix, check out this link: http://css-tricks.com/snippets/css/clear-fix/
Hope this helps!
You need to add the floatstop to the parent element that contains the floating element:
CSS:
.floatstop:after {
content: ".";
display :block;
height :0;
clear :both;
visibility :hidden;
}
*:first-child+html .floatstop {min-height: 1px;}/* ie7 fix */
* html .floatstop {height: 1%;}/* ie6 fix */
HTML:
<div class="floatstop">
<div>floated div</div>
<div>floated div</div>
</div>
I realized that I need a wrapping container to do this. I was just trying to clear floating elements on one level. Adding the container with the Sass pie-clearfix(); mixin solved the problem.

Left and right divs are not working correctly?

I am trying to have one div on the left side of the page, and one div on the right side of the page.
The code (Code Here) works fine when it's in jsFiddle; however, when I use the same code on my website the "right" div doesn't float to the right, doesn't have a border, and it places itself above the "left" div.
Any ideas?
You have many issues to solve in order to present the web page properly cross-browser, but to give you a solution for the problem at hand, you can see this Fiddle Example!
THE RELEVANT CSS
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
THE RELEVANT HTML
<div class="clearfix">
<div id="right">Right!</div>
<div id="left">Left!</div>
</div>
Explanation:
Wrap the #left and #right into a div that uses the class clearfix to clear the document flow at that specific point.
That should allow the #right and #left to be on their proper place with or without a CSS Reset applied to your web page.
Get a CSS Reset for HTML5: http://html5reset.org/
Read about Floated Elements: CSS Float | CSS float Property

What is Logically and semantically correct, A-grade browsers compatible and W3C valid way to clear float?

What is Logically correct and W3C valid way to clear float?
zoom:1 is not valid by W3C and IE8 don't have hash layout problem
overflow:hidden and overflow:hidden
were not made to do this,as the spec
intended overflow to be used
<div class="clear"/> is not
semantically correct and i don't want to add extra markup.
clearfix hack generates content that
really hasn’t any semantic value.
I've asked many questions and read many articles on this issue but haven't find best way.
Using a clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<div class="clear"/> is not semantically correct and i don't want to add extra markup.
That's why often a <br class="clear"> is been used. You basically want to have a linebreak between the float and the next element. True, it's not nice in the markup, but that's the payoff of using floats.
Alternatively you can also just set a clear: both; on the subsequent block element which you'd like to put in the next line.

What is the best way to clear the CSS style "float"?

I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice.
There is a CSS hack (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead you perhaps should look at this hack. But.. after reading through 700 pages of comments :) it seems there may be some places the latter hack does not work.
I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.
What is the current best practice for clearing divs in a browser independent way?
Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by #RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher's micro clearfix:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Original Answer:
I really don't like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.
Obviously, it won't work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.
See more info on using overflow instead of clear to avoid adding extra markup.
I've found that most often (myself included), this method is used in the html:
<div class="clear"></div>
With this in the stylesheet:
.clear {clear: both;}
.clear-fix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear-fix
{
zoom: 1;
}
<div class="clear-fix">
<div class="left">Some Div With Float</div>
<div class="left">Another Div With Float</div>
</div>
In my opinion this is the best way. No need of extra DOM elements or wrong usage of overflow or any hacks.
there's a bit of voodoo I tend to find myself using.
<span class="clear"></span>
span.clear {
display: block;
clear: both;
width: 1px;
height: 0.001%;
font-size: 0px;
line-height: 0px;
}
This combination magically fixes a whole host of browser problems, and I've just used it for so long I've forgotten what problems it solves.
The best way is put "overflow:auto;" in div container. It is more clean.
div.container {overflow: auto;}
more details in: http://www.quirksmode.org/css/clearing.html
Simply adding overflow:auto; to the parent element containing the floating element(s) is an excellent fix in most cases.
SAMPLE HTML:
<div class="container">
<div class="child">...</div>
<div class="another-child">...</div>
<div>
CSS:
.child {
float: right;
word-wrap: break-word;
}
.child img {
max-width: 100%;
height: auto; /* of course, this is default */
}
.child p {
word-wrap: break-word;
}
.container {
overflow: auto;
}
As with any other method, there are some gotchas with overflow:auto; as well. In order to fix them — apply max-width:100%; height: auto; for images, and word-wrap: break-word; for text contained within the floating elements.
[source]
jQuery UI has some classes to fix this as well (ui-help-clearfix does something).
Technically <div style="clear:both;"></div> is better than <br style="clear:both;" /> because an empty div will have 0 height, thereby just clearing the floats. The <br /> will leave a space. I see nothing wrong with using the <div/> method.
Now, in 2021, you can use display: flow-root for parent element instead of clearfix hack.
.box {
display: flow-root;
}
As of March 2021, 91.35% of browsers worldwide can handle display: flow-root, based on Can I Use data.
.floatWrapper {
overflow:hidden;
width:100%;
height:100%;
}
.floatLeft {
float:left;
}
<div class="floatWrapper">
<div class="floatLeft">
Hello World!
</div>
<div class="floatLeft">
Whazzzup!
</div>
</div>
The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to float the parent to force it to adjust with the heights of its floated child elements, then apply your css clear to the next element you actually want to clear. It's often necessary to add width:100% too, as without floating the parent may unexpectedly change your layout.
As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br> or <div> with a clearfix class.
<div class='float_left'>
something else
<br style="clear:both;">
</div>
this br will not leave a space.
<br clear="all"/>
works well aswell. The benefit to this over using class="clear" is that it just works and you don't have to setup extra rules in your css to make it so.
Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.
I prefer using with .clear { clear: both; } over .clear-fix:after blah blah, because when you look at the markup it's clearer what's happening. Just FYI here's my tutorial on how to use float and clear that I wrote a while ago.

Resources