19

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

我在这里做了一些测试。我认为布局会如下所示，因为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;
}
4

2 回答 2

31

clear在一个元素上只清除它之前的浮动以文档顺序。它不会清除它之后的浮动。left和值分别表示元素前的right左浮动和右浮动的间隙。它们并不意味着在元素之前和之后清除浮动。

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

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

于 2013-04-18T10:11:35.790 回答
1

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

.clr::after
{
 content: "";
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}
于 2013-04-18T10:13:38.133 回答