Best clearfix ever?
I think that's a bad idea. Are you really going to trust somebody who seemingly forgot to do this:
article, aside, div, footer, form, header, nav, section, ul { zoom:1; }
Clearing floats is not a complicated thing to get right.
It should be handled on a case-by-case basis, not sledge-hammered onto "every" element.
Doing that will come back to bite you in some way, I'm sure of it.
For one thing, I agree with @Guffa's answer.
An edge case reason against it concerns IE7: http://www.satzansatz.de/cssd/onhavinglayout.html
zoom: 1
is a common method to provide something known as hasLayout
to elements. Applying hasLayout
to an element fixes certain kinds of rendering problems, but it can also cause other problems. A quote from the linked document:
Don't give layout to all. Poison in that concentration,
having layout is not the cure, it
changes the rendering fundamentally.
I personally like to use the overflow: hidden
method to contain floats. When that doesn't work, then I use clearfix.
You should use the version of clearfix from http://html5boilerplate.com/:
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
Are there any disadvantages to adding clearfix to all divs?
If you do this, then you will never be able to have multiple floated div
s stack horizontally with one another, because your clearfixes are getting in the way.
So in a way, having a clearfix on every div
element would nullify the effect of floating them, as well as related elements.
This is why articles often suggest applying clearfix to a certain class, then giving the desired elements that class instead:
.cf:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
clearfix' OR 'overflow: hidden' Which is better for multiple listing?
Both methods achieve similar results, but in some cases, one may be more advantageous than the other.
The use of overflow: {auto|hidden}
creates a new block formatting context and that has implications for how margins and paddings are contained within the parent elmement. For example, with a new block formatting context, some margins will not collapse as you might expect.
With a clearing element (either in the DOM or as a pseudo element), margins collapse as expected.
Beyond this distinction, it is hard to recommend one method over the other.
Comment: Adding Classes to li
Adding an additional class name to the li
elements will not significantly slow down the page load time as a result of the work the broswer does to parse the page and apply the stylesheets.
Unless you have a complex web page with thousands of CSS rules, I don't think that you need to be too concerned about browser performance.
What is more relevant to the average web developer is that having a page that is marked up with numerous classes can make maintenance more difficult. Keeping stylesheets organized is a skill that you develop with experience.
Is clearfix deprecated?
You can pretty much use overflow: hidden
all the time.
But, there are exceptions. Here's an example of one:
Overflowing a container div horizontally but not vertically
The question there was:
- There's a fixed height on this: http://jsfiddle.net/je8aS/2/
- Without the fixed height: http://jsfiddle.net/thirtydot/je8aS/5/
- How to clear the floats without using a fixed height?
overflow: hidden
doesn't work: http://jsfiddle.net/thirtydot/je8aS/6/- You have to use some other method of clearing floats, such as
clear: both
:
http://jsfiddle.net/je8aS/3/ - The clearfix class also works: http://jsfiddle.net/thirtydot/je8aS/11/
Here's a more important example of when you can't use overflow: hidden
:
http://fordinteractive.com/misc/overflow/
That's not to say that clearfix is the only alternative - display: inline-block
cleanly fixes that example:
http://jsbin.com/ubapog
What is a clearfix?
If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.
It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
display: inline-block
- Better- Flexbox - Best (but limited browser support)
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
For a detailed browser list see: https://caniuse.com/flexbox.
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
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;
}
Normally you would need to do something as follows:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer @ CSS-Tricks
Clearfix: Height 1%
Setting the height explicitly is the safest (read not the cleanest) way to clear floats. In the themes, the actual clearfix implementation would use :after pseudo selector to clear floats. However the :after property is not supported in IE6/7. Thus, height: 1% is specified. Which works in IE6/7.
Source http://www.pewpewlaser.com/articles/clearfix-ie
Is it safe to apply clear: both; to .clearfix::before?
Using clearance in a ::before
pseudo-element is a bit weird because, while the contents of the element will be placed below the float due to clearance, the float will still overlap the element.
See what happens when you add a background:
.container { background: silver;}.float { float: left;}.clearfix { background: green;}.clearfix::before,.clearfix::after { content: ""; display: block; clear: both;}
<div class="container"> <div class="float"> outer-float </div> <div class="clearfix"> <div class="float"> inner-float </div> content </div></div>
What methods of ‘clearfix’ can I use?
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.
Related Topics
Cache Busting Images Which Are Linked Inside SASS Files
Bootstrap: How to Create a Series of Div on One Line Hiding The Overflowing Divs
Add Strikethrough to Checked Checkbox
CSS: Nth-Of-Type() and: Not() Selector
How Make: Focus,: Active Be The Same as: Hover
Systematically Resolve Conflicting Styles in CSS
Javafx: Styling Application with CSS Selectors
Is There Any Media Query for Non-Retina Display
The Fieldset's Background Color Gets Out of Border in Ie
Working with CSS Floats in HTML2Pdf
Sizing Width of an Element as a Percentage of Its Height or Vice Versa in a Fluid Design
CSS Media Queries: Target Mobile Devices Without Specifying Width, Pixel Ratio, etc
I Am Gettiing an Error Expected New Line While Compiling Sass
Why Does Bootstrap Use a 0.02Px Difference Between Screen Size Thresholds in Its Media Queries
CSS Form Checkbox Styling with Checked and After Tags
Why Is Browser Showing Td's Larger Than My Specified Width Property