My Float Theory Page

Float Theory

Smashing Magazine Oct 2014
A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted - by designers and browsers.

Still, if you take a closer look at the float theory, you’ll find out that it isn’t that complex as it appears to be. Most related problems are caused by the older versions of (take a guess) Internet Explorer. If you know the bugs, you can control the way information is presented in a more sophisticated, profound way.

Let’s clarify some usual misunderstandings, which always appear once floats are being used. Here are the most important things you should keep in mind developing css-based layouts with floats.

Float Techniques

little floats When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are float: left, float: right, or float: clear.

Content may flow along the side of a float. When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.

You should always set a width on floated items (except if applied directly to an image - which has implicit width). If no width is set, the results can be unpredictable. For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow.