The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for disrupting the layout around them, leading to issues with readability and usability. However, the root of these problems isn’t the theory itself, but rather how the theory is interpreted—both by developers and browsers.
That said, if you take a closer look at the float theory, you’ll realize that it’s not as complex as it seems. Most of the related problems stem from older versions of (you guessed it) Internet Explorer. If you’re aware of the bugs, you can gain better control over how information is presented, in a more sophisticated and nuanced way.
Let’s address the issue and clear up some common misunderstandings that arise whenever floats are used. We’ve reviewed dozens of related articles and compiled the most important points you should keep in mind when developing CSS-based layouts using floats.