Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.
Bad Solution :
<div style="clear:both"></div>
Perfect Cross Browser Solution:
add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-div of-course.
.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%;
overflow: visible;
}
18 replies on “CSS Clearfix Best Cross browser solution”
Good Excellent ! good start keep it up i know your are a good developer
Thank you !
Best Cross-browser CSS Clearfix solution | Kaizen…
A simple cross-browser css solution. Works like a charm…
Could you give some example? Because I tried it (first div floated left, second right) and the div with this two elements doesn’t extend. Did I missed something? Thanks.
Hi,
check out this sample http://jsfiddle.net/W2ZMs/
then remove the clearfix class on main container and try it again, you will see the container will not actually contain the elements then
Hey buddy, when ur trying to float elements in your layout you need to clear+fix your parent element, in order to float your child elements from not breaking the layout. Try using the following example, it might solve all your cross browser issues:
Style:
/* @group clearfix */
.clearfix:before, .clearfix:after { content: “020”; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clearfix {
zoom: 1;
}
.clearfix:after {
clear:both;
content:’.’;
display:block;
visibility:hidden;
height:0;
font-size: 0;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1%;
}
*+html .clearfix {
}
/* @end */
HTML Markup:
Floating Left Element
Floating Right Element
Hope you like my coding style.
Cheers.
Yeah, it works, forgot the fixed “height” on outer element :) thanks and great work!
which fixed height ? there is no need to fix a height for the container containing floating elements. I am glad this helped you.
Hi I am soori,
There is no need to write clearfix class , we can write css [display:table] it self to wraper or container
Hi Soori, the css property you just mentioned has some cons associated with it, the major one being that this wont work in IE7 and earlier browsers. And this is a major point because we dont develop layouts for our browsers only :). You can google about this fact and other disadvantages of using display:table for making modern day layouts.
I hope that has answered your query.
exp:
#wraper{
width:980px;
display:table;
marging:0;
padding:0;
}
I like how this doesn’t require you to create a new element to make it work cross browser (and I literally tested all of them). There is, however, a limitation.
Suppose you have an unordered list and you float the list items. In order to fix the float problem, you’d apply clearfix to the ul. Now, you can no longer center the ul by applying margin: 0px auto;
I think I’m going back to the WordPress solution with the
hi @ce6a12cbc444182b7744113204085b37:disqus , thanks for liking the solution proposed here.
For the centering of ul you need to have a width assigned
Not working properly yet:
Untitled
.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%;
}
#dSide {
width:200px;
border:1px solid #ddd;
height:100px;
float:left;
}
#dMain{
margin-left:210px;
border:1px solid #ddd;
}
#head a{
float:left;
display:block;
width:100px;
height:30px;
background-color:#ddd;
}
left side, float
aaaa
bbbb
cccc
content followed
Just want some explanation on why is your code a best solution rather than ?
Setting the container’s display to “inline-block” breaks my layout. Now the container depends on its internal content to push out its width instead of acting like a block element. If the internal content is minimal then the container is too skinny.
I added the line “width:inherit” to the .clearfix class, seems to have fixed my issues.
[…] 原文：http://umairj.com/68/css-clearfix-best-cross-browser-solution/ […]
If you don’t need support for IE you can use this very simple clearfix solution:
.ClearFix:after {
content:””;
display:table;
clear:both;
}