CODEWITHSUNDEEP
csscss-float
Joe.wang
Joe.wang

Reputation: 11793

Why clear: right doesn't work as intended

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)

<div class="container">
    <div class="A">a</div>
    <div class="B">b</div>
    <div class="C">c</div>
    <div class="D">d</div>
    <div class="CB"></div>
</div>

.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;
}

Upvotes: 19

Views: 13250

Answers (2)

Andrew
Andrew

Reputation: 1880

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

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

Upvotes: 1

BoltClock
BoltClock

Reputation: 723538

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.

Upvotes: 31

Related Questions