CSS: clearing floats cheatsheet

This post will try to summarize the most used techniques for clearing and containing floats, based on my experience and knowledge. I'll also provide a brief explanation of the pros and cons of the various techniques provided here to help you with choosing the one that fits your needs.

Clearing Floats Cheatsheet
Rule/Technique Applies to Pros Cons
overflow: auto Parent container More flexible than using the hidden value IE6 needs also height: 100% or height: 1px
float: left, float: right Parent container Avoids any computation of overflowing content Subsequent elements must be cleared as well
position: absolute Parent container Useful when you have an absolutely positioned element with floats inside If you don't set a context for the positioning, the whole viewport will be taken as reference
Easy Clearing Parent container Very flexible It may require a little effort to grasp its concepts
display: table Parent container Very simple to use Currently some problems in Webkit browsers with element dimensioning

If you know other techniques of massive use, please let me know.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.