css - 为什么清除: right doesn't work as intended

Question

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

我做了一些测试 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 仅清除按文档顺序在其之前 的 float 。它不会清除 之后的 float 。 left 和 right 值分别表示 元素之前 的左 float 和右 float 的间隙。它们并不意味着清除元素前后的 float 。

由于 C 正在 float ，但没有应用任何间隙，它 float 在 B 旁边。B 不会尝试清除 C，因为 C 在文档结构中排在它之后。

此外，clear: right 在您的测试用例中没有任何效果，因为无论如何您的元素都没有向右浮动。