为什么.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类不适用于浮动元素？

回答

相关问题