爲什麼要清楚：沒有按預期工作

我總是被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

爲什麼要清楚：沒有按預期工作

回答

相關問題