Menu
What's the modern way to clear floated content these days?
There's the "recent" modern way of adding a ".clearfix" on the parent element to clear the contained floats and that would work great. In fact, this is my favorite method and still use this on any site I touch. It makes every browser render correctly.
However, I know it's sort of a hack, and I googled recently to find that a lot of front-end developers feel the same way and want a more true solution. The results I've found have not been to great. There are some solutions but they only work on IE7+ and sometimes on Opera things are a bit buggy.
Anyway, I'm just wondering what's the best way to clear floats these days?
498
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both .
Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively. None is the default, which is typically unnecessary unless removing a clear value from a cascade.
Purpose of clearing floats in CSS: We clear the float property to control the floating elements by preventing overlapping. On our webpage, if an element fits horizontally next to the floated elements, unless we apply the clear property same as float direction then the elements will be a move below the floated elements.
Just add overflow:auto to the containing div. (explanation)
198
a) Here is a roundup of the clearing methods along with pros and cons: Methods for Containing Floats
b) This article titled "How To Clear Floats Without Structural Markup" contains a heading: 21st Century Style
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
