爲什麼.clearfix類不適用於浮動元素？

在這個線程：What is a clearfix?爲什麼.clearfix類不適用於浮動元素？

我看到的最好的回答說clearfix可以直接添加到最後一個浮動元素：

隨着clearfix，你只需要

撰寫HTML代碼：

<div class="clearfix"> 
    <div style="float: left;" class="clearfix">Sidebar</div> 
</div>

和CSS代碼：

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

然而，當我試圖添加clearfix到浮動元素，它不會在所有的工作（如可以在下面的代碼片段中可以看出）：

.clearfix:after { 
 
    content: " "; /* Older browser do not support empty content */ 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 

 
div#container { 
 
    background-color: green; 
 
    width: 50%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.floating { 
 
    float: left; 
 
    margin: 1px; 
 
    background-color: yellow; 
 
}

<div id="container"> 
 
    <div class='floating'>1</div> 
 
    <div class='floating clearfix'>2</div> 
 

 
</div>

如可在結果可以發現，#container的身高仍0。看來clearfix不起作用，不能直接添加到最後的浮動元素。這是真的嗎？有沒有人有關於此的想法？

來源

2015-10-14 Hanfei Sun

你在哪裏看到「clearfix可以直接添加到最後一個浮動元素」？ – Stickers

@Pangloss在他粘貼的代碼中：'

Sidebar

'，我不能完全理解。我認爲補充工具欄應該是一個浮動元素以及一個浮動元素的容器.. –

它具有對容器和浮動元素的clearfix類集，我相信第二個不會做任何事情。 '：之後'在元素的末尾插入一個僞元素，但它仍然在**元素內部。 – Stickers

您已經對container使用clearfix。

.clearfix:after { 
 
    content: " "; /* Older browser do not support empty content */ 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 

 
div#container { 
 
    background-color: green; 
 
    width: 50%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.floating { 
 
    float: left; 
 
    margin: 1px; 
 
    background-color: yellow; 
 
}

<div id="container" class="clearfix"> 
 
    <div class='floating'>1</div> 
 
    <div class='floating'>2</div> 
 

 
</div>

來源

2015-10-14 20:37:04

您需要添加:after元素，該元素應清除容器末端的子元素，而不是在浮動元素本身內。所有您需要做的就是給容器類clearfix，像這樣：

<div id="container" class="clearfix"> 
    <div class="floating">1</div> 
    <div class="floating">2</div> 
</div>

來源

2015-10-14 20:36:58

爲什麼.clearfix類不適用於浮動元素？

回答

相關問題