为什么 .clearfix 类不适用于浮动元素？答案

【问题标题】：Why does .clearfix class not work on floating element?为什么 .clearfix 类不适用于浮动元素？
【发布时间】：2016-01-13 02:48:36
【问题描述】：

在此线程中：What is a 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 添加到浮动元素时，它根本不起作用（如下面的sn-p 所示）：

.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不起作用，不能直接添加到最后一个浮动元素。这是真的吗？有人对此有想法吗？

【问题讨论】：

你在哪里看到“clearfix 可以直接添加到最后一个浮动元素”？
@Pangloss 在他粘贴的代码中：<div style="float: left;" class="clearfix">Sidebar</div>，我无法完全理解。我认为 Sidebar 应该是一个浮动元素，也是一个浮动元素的容器。
它在容器和浮动元素上都有 clearfix 类集，我相信第二个没有做任何事情。 :after 在元素末尾插入了一个伪元素，但它仍然在元素本身。
@hanfeisun 我认为发帖者不小心将.clearfix 类应用于错误的元素。他们确实将其应用于侧边栏 DIV 的父 DIV，这将是正确的，并且与发布给您的问题的一些答案一致。

标签： html css floating clearfix

【解决方案1】：

您必须在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>

【讨论】：

【解决方案2】：

您需要添加:after 元素，该元素应该清除容器末尾的子元素，而不是浮动元素本身。你所要做的就是给容器类clearfix，像这样：

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

【讨论】：