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

Question

我总是对CSS中的clear: left，clear: right和clear: both感到困惑。我知道clear: both意味着它不允许自身两侧浮动元素。

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

哦 乙 光盘

更新（发布代码）

<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对您的测试用例没有任何影响，因为无论如何您的元素都没有浮动到右侧。

Answer 2

如果你使用的话，你可以清楚地在div之后工作：

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