Mystery of Float Not Resizing Div

When using CSS float, the assumption is that subsequent elements will align left rather than flowing onto a new line. However, in some scenarios, such as the example provided, the following div continues to span the entire width instead of starting to the right of the first div.

To understand this behavior, we delve into the intricacies of float positioning. When an element is floated (in this case, the .inline div), the content below it aligns with the right side of that element. However, the width of the containing block established by the subsequent element (the .yellow div) is still preserved.

This behavior is outlined in the CSS spec: block boxes not positioned flow vertically as if the float did not exist. However, line boxes next to the float are shortened to accommodate the float's margin box.

Therefore, if a block-level element (like .yellow div) has a background, it will extend through the floated element.

The Resolution

According to CSS level 2.1, elements with certain properties (block-level replacements, elements establishing a new block formatting context) must not overlap the margin box of any floats in the same context. Adding an "overflow" property other than "visible" to the .yellow div prevents it from overlapping the floated element.

When Overlapping Can Be Useful

It's important to note that overlapping can be beneficial in situations where the content after the floated element is long enough to continue normally. Restricting the content by default could result in it not flowing under the floated element.