Experiments with floats: whats the best method of clearance?
When developing websites there is one thing I have never kept consistent; the method of clearing floats. It seems every project I take, I seem to do it a different way, well Its about time I sorted it all out in my mind.
For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.
To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.
There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:
- The extra markup
- The Amount of CSS
- Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
- Ease to implement
