DEV Community

Explanation of the CSS clear float property [Examples]

Nesha Zoric on March 28, 2018

A little while ago I wrote about the float property. So, now is a good time to explain the clear property. The clear property is directly relate...
Collapse
 
derek_morash profile image
Derek

Float and clear always seem like such straight forward properties but I remember when I first started learning css it took me forever to finally get the hang of them. Great explanation!

One thing I noticed though is your Can I Use diagram, I think you're looking at the wrong one. Clear is part of CSS 2.1, everything in that spec is basically supported all the way back to IE6.

See here

Screenshot of CSS 2.1 spec properties from Can I Use

Collapse
 
frankkubis profile image
Frank Kubis • Edited

You dont need float anymore, witch is part of CSS since 2.1 and supported by all browsers.

Go and use flexbox, it allows much more complex flow operations and is easy to handle: w3schools.com/css/css3_flexbox.asp

If you need to use float, the best way to clear is using pseudo elements: w3schools.com/howto/howto_css_clea...

Collapse
 
vladimirp profile image
vladimirp.dev

A minute of silence for all the devs that maintain old code and still have to deal with floats & clearfixes ⚰️