In CSS, what does the clear property do, and which floats does it actually respond to?

## What clear is for Floats let content sit beside them. `clear` is the opt-out: it says "this box must start below any float on that side", which is how you make a footer sit under a floated sidebar instead of squeezing next to it. ```css .sidebar { float: left; width: 20rem; } .footer { clear: both; } ``` The values are `none` (the default), `left`, `right`, and `both`. `clear: left` waits for left floats, `clear: right` for right floats, `both` for either. Logical values `inline-start` and `inline-end` also exist for writing-mode-relative sides. ## The mechanism: clearance, not margin A cleared box does not get a bigger margin. The browser computes where the box would go, and if that position is not below the bottom **margin** edge of the floats it must clear, it introduces **clearance** — an amount of space inserted above the box's top margin edge — until the constraint is satisfied. Two things follow from this that catch people out: - Your `margin-top` is not what moved the box, so "reducing the margin" will not pull it back up. - Clearance is measured against the float's *margin* box, so `margin-bottom` on the float pushes the cleared element further down as well. ## Limit one: only preceding floats `clear` looks backwards. A float that appears *after* the cleared element in document order is not considered; the cleared box will happily sit above it and the later float will simply flow beside or below as normal. Float layouts are therefore source-order dependent in a way flex and grid are not. ## Limit two: only floats in the same formatting context Floats are contained by the nearest block formatting context root. If a float lives inside a box with `display: flow-root`, `overflow: hidden`, or another root, an element outside that box cannot clear it — from the outside, that float is not there; only the root box itself is. This is exactly why containment (`flow-root`) and clearing are different tools with different reach, and why a clearfix pseudo-element must be *inside* the same container as the floats it clears. ## Limit three: it only moves the element it is on `clear` is not a broadcast. It does not un-float anything, it does not affect siblings, and it does not make an ancestor include floats in its height. Putting `clear: both` on the last floated child is the classic mistake: that child moves down past its siblings, is still a float, is still out of flow, and the parent's auto height is unchanged. The clearfix works only because the cleared box is an ordinary in-flow block — usually a generated `::after` — whose position the parent *does* measure. ## Where clear does nothing - On absolutely positioned or fixed elements: they are out of flow and clearance does not apply. - On flex items and grid items: their parent's layout model places them, and `clear` is ignored along with `float`. - On inline-level boxes: `clear` applies to block-level boxes; an inline box has no top border edge to push down in this sense. ## Reading legacy code In older stylesheets you will see three shapes of the same intent: an empty `<div class="clear">` in the markup, a `.clearfix::after` rule, and `clear: both` sprinkled on section headings. The first two exist to solve *containment* and are better written as `display: flow-root` on the container today. The third — clearing a specific element so it starts below a float — is still the correct, intended use of `clear` and has no replacement, because it is not a containment problem.