为什么要清楚:权利不按预期工作

Question

我总是感到困惑clear: left,clear: right并clear: both在CSS.我知道clear: both它意味着它不允许自身两侧浮动元素.

我在这里做了一些测试.我认为布局会如下所示,因为B使用clear: both.但事实并非如此.有人能告诉我为什么吗？

一张
B
CD

更新 (发布代码)

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

Answer 1

clear在元素上,仅清除浮动之前它在文档顺序.它之后不会清除漂浮物.的left和right值表示左浮纱和浮右的清除元件之前分别.它们并不意味着在元素之前和之后清除浮动.

由于C正在浮动,但没有应用任何间隙,它会漂浮在B旁边.B不会尝试清除C,因为C在文档结构中跟随它.

此外,clear: right在您的测试用例中没有任何影响,因为无论如何都没有任何元素浮动到右侧.