为什么要清楚：没有按预期工作

我总是被CSS中的clear: left，clear: right和clear: both搞混了。我知道clear: both意味着它不允许在它自己的两侧浮动元素。为什么要清楚：没有按预期工作

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

甲
乙
CD

更新（邮政代码）

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

来源

2013-04-18 Joe.wang

你应该勾勒出的问题你的测试用例的代码，以及 - 包括从小提琴的基本位（没有大小和边界等） – millimoose

clear的元件上，仅清除浮之前按文档顺序。它不清楚漂浮在之后的漂浮物它。 left和right值分别表示分别在元素之前的左浮标和右浮标的清除。它们并不意味着在元素前后清理浮动。

由于C正在浮动，但没有任何清除被应用，它会漂浮在B旁边.B不会尝试清除C，因为C在文档结构中出现。

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

来源

2013-04-18 10:11:35 BoltClock

@Jon：谢谢，那就是我正在寻找的词组，补充说。 – BoltClock

感谢您的编辑和帮助，您的回答非常明确和有帮助。我喜欢。现在我对它的理解就更好了。 –

你可以有一个明确的，如果你使用DIV之后的作品：

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

来源

2013-04-18 10:13:38 Andrew

为什么要清楚：没有按预期工作

回答

相关问题