How to clear CSS floats without extra markup - different techniques explained
When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.
The way to solve it is to use different methods applied to the element containing one or several floated elements. From my experience, there are three major approaches:
- Floating the containing element as well.
- Using
overflow: hiddenon the container. - Generating content using the
:afterCSS pseudo-class.
Floating the container
If you float an element containing floats, it will encompass its content. The side-effect of this is that we add another floated element to the page, while we most of the times want it to behave as a regular block element. That is solved by applying a width of 100% to the container as well, so it forces a line-break before the content after it.
Code
.container-with-float{
float: left;
width: 100%;
}
Downsides
- Setting a width to 100% might collide with desired padding.
- IE 6 seems to add an extra bottom margin in some cases.
Adding overflow: hidden to the container
If you add overflow: hidden to the containing element, it will automatically adjust its height and take the floated children into account.
Code
.container-with-overflow{
overflow: hidden;
/*
Use height: 1%; or zoom: to trigger hasLayout in IE 6.
My suggestion is to serve this only to IE 6 through a
separate stylesheet included with conditional comments.
*/
height: 1%;
}
Downsides
- If you want a fluid height, there can be some situations where using
overflowcan collide with other wanted behavior. A suggestion is to play around with things such asoverflow-x: hiddenand/oroverflow-y: hiddenin those cases. - hasLayout has to be triggered for IE 6, using
height: 1%;orzoom: 1;. My recommendation is to have this in a separate IE 6 stylesheet, included through conditional comments.
Generating content through CSS
Another alternative is to use the CSS pseudo-class :after to generate content after the containing element, using it to clear floats and then hiding itself. Personally, I don’t like this approach since it generates content to the page that has nothing to do there in the first place.
Code
.container-with-generated-content{
/*
This is necessary to trigger hasLayout, for both IE 6 and IE 7!
My suggestion is to serve this only to IE through a
separate stylesheet included with conditional comments.
*/
height: 1%;
}
.container-with-generated-content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Downsides
- Not IE 6 nor IE 7 supports the
:afterpseudo-class, so you need to apply a hasLayout fix for both of them. Note that IE 7 also supports a hasLayout fix. - It generates content that really hasn’t any semantic value.
A little test page
I’ve put together a little test page where you can see the three different ways to address this problem in action. Play around with it and let me know if you encounter any problems!
Do you use any other approach which works fine for you? Please let me know!
