为什么明确：正确的方法没有按预期工作

我总是很困惑clear: left, clear: right and clear: both在CSS中。我知道clear: both意味着它不允许在其两侧浮动元素。

我做了一些测试here http://jsfiddle.net/malaikuangren/xqFUL/1/。我认为布局会如下所示，因为B uses clear: both。但事实并非如此。有人能告诉我为什么吗？

A
B
CD

Updated（贴出代码）

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

clear在元素上仅清除浮动before按文档顺序排列。它不会清除浮动after它。这left and right值表示左浮子和右浮子的间隙位于元素之前分别。它们并不意味着清除元素之前和之后的浮动。

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

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