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.
| 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.