Why clear: right doesn't work as intended

Question

I'm always confused by `clear: left`, `clear: right` and `clear: both` in CSS. I know `clear: both` means it doesn't allow floating elements on both sides of itself. I did some testing here. I thought the layout would appear like below, because `B` uses `clear: both`. But it doesn't. Could someone tell me why? A B CD Updated (Post the code) ```

a

b

c

d

.container{ width:100%; border:1px solid red; } .B{ float:left; clear:both; width:10%; height:30px; border:1px solid blue; } .A,.C,.D{ float:left; width:10%; height:30px; border:1px solid blue; } .CB{ clear:both; } ```

Accepted Answer

`clear` on an element only clears the floats before it in document order. It doesn't clear floats after it. The `left` and `right` values mean clearance of left floats and right floats preceding an element respectively. They don't mean clearing floats before and after the element.

Since C is being floated, but doesn't have any clearance being applied, it floats next to B. B does not try to clear C because C comes after it in the document structure.

Furthermore, `clear: right` doesn't have any effect in your test case because none of your elements are being floated to the right anyway.

Why clear: right doesn't work as intended

Solution

Problem