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

Answer 1

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.

Answer 2

You can have a clear that works after the div if you use:

.clr::after
{
 content: "";
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}