Css 为什么清晰：正确与否'；我不能如愿工作

我总是被CSS中的

clear:left

、

clear:right

和

clear:both

弄糊涂。我知道

clear:both

意味着它不允许在自身的两侧都使用浮动元素

我做了一些测试。我认为布局如下所示，因为

B

使用

clear:both

。但事实并非如此。有人能告诉我为什么吗

A
B
光盘

已更新 （张贴代码）

A.
B
C
D
.集装箱{
宽度：100%；
边框：1px纯红；
}
.B{
浮动：左；
明确：两者皆有；
宽度：10%；
高度：30px；
边框：1px纯蓝色；
}
.A、.C、.D{
浮动：左；
宽度：10%；
高度：30px；
边框：1px纯蓝色；
}
.CB{
明确：两者皆有；
}

清除元素上的

仅按文档顺序清除其前面的浮动。它不清除后面的浮动。

left

和

right

值分别表示元素前面的左浮动和右浮动的间隙。它们并不意味着在元素之前和之后清除浮动

由于C是浮动的，但没有应用任何清除，所以它浮动在B旁边。B不尝试清除C，因为C在文档结构中位于C之后

---

此外，

clear:right

在您的测试用例中没有任何效果，因为您的任何元素都不会向右浮动。

如果您使用以下命令，则可以在div之后使用clear：

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

---

@乔恩：谢谢，这是我要找的短语，补充道。谢谢你的编辑和帮助，你的答案非常清楚，很有帮助。我喜欢。现在我对它的理解更好了。你也应该在问题中概述你的测试用例的代码——包括小提琴中的基本部分（sans大小和边框等）

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