一个新的显示值似乎是在一行中的作业。

display: flow-root;

来自W3规范:“元素生成一个块容器盒，并使用流布局布局其内容。它总是为其内容建立一个新的块格式上下文。”

信息: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※如图所示、在上面的链接中,支持目前有限的后备支持像使用以下可能: https://github.com/fliptheweb/postcss-flow-root

你试过这个吗:

<div style="clear:both;"/>

我用这个方法没有任何问题。

我在官方的CLEARFIX-Method中发现了一个bug: 交通部没有字体大小的规定。 如果你设置height = 0并且DOM-Tree中的第一个元素具有类clearfix，那么页面底部总会有12px的边距:)

你必须像这样修正它:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

它现在是yaml布局的一部分…看看吧，非常有趣! http://www.yaml.de/en/home.html

为什么只是试图使用css hack来做1行HTML做的工作。为什么不使用语义html tu放断点返回行?

Fo me真的更好用:

<br style="clear:both" />

如果你不想在你的html中添加任何样式，你只需要使用class作为你的break 然后输入。clear {clear:both;}。

这样做的好处:

html返回行的语义使用 如果没有CSS加载，它将工作 不需要额外的CSS代码和Hack 不需要用CSS模拟br，它已经存在于HTML中

考虑到我不打算发布的大量回复。然而，这种方法可能会帮助到别人，就像它曾经帮助过我一样。

尽可能远离漂浮物

值得一提的是，我像埃博拉病毒一样避开花车。有很多原因，我并不孤单;阅读Rikudo关于什么是clearfix的回答，你会明白我的意思。用他自己的话来说:……在布局中使用浮动元素越来越不受欢迎，而是使用更好的替代品……

除了浮动，还有其他好的(有时更好的)选择。随着技术的进步和改进，flexbox(和其他方法)将被广泛采用，而浮点数将成为一个糟糕的记忆。也许是CSS4?

---

浮动错误行为和失败的清除

首先，有时候，你可能认为你是安全的，直到你的救生圈被刺穿，你的html流开始下沉:

在下面的代码依赖http://codepen.io/omarjuvera/pen/jEXBya中，使用<div classes ="clear"></div>(或其他元素)清除浮点数的做法很常见，但不受欢迎且反语义。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

然而，就在你认为你的花车值得起航的时候，砰!随着屏幕尺寸变得越来越小，你会看到奇怪的行为，如下图所示(同样的http://codepen.io/omarjuvera/pen/jEXBya):

你为什么要关心这个? 大约80%(或更多)的设备都是小屏幕的移动设备。台式电脑/笔记本电脑不再是王者。

---

事情并没有就此结束

这不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说，你所要做的就是把你的浮动放在一个容器中。但正如您在代码依赖和图形中看到的那样，情况并非如此。这显然让事情变得更糟:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

至于结果呢?

是一样的!

至少你知道，你会开始一个CSS派对，邀请各种选择器和属性的派对;使你的CSS比你开始的时候更混乱。只是为了修理你的花车。

---

CSS Clearfix拯救

这个简单而适应性强的CSS是一个美人和“救世主”:

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

就是这样!它真的可以在不破坏语义的情况下工作，我提到过它可以吗?：

同样的例子……HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

现在我们不再需要<div classes ="clear"></div> <!——充当一堵墙——>，让语义警察高兴。这还不是唯一的好处。这个clearfix可以响应任何屏幕大小，而不需要使用最简单的@media。换句话说，它将保持你的浮动容器在检查和防止洪水。最后，它提供了对旧浏览器的支持，只需一个小的空手道斩=)

这里又是clearfix

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

我也浮动#content，这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。

包装器也是如此，您需要将其设置为块格式化上下文来包装这两列。

这篇文章提到了一些你可以使用的触发器: 块格式化上下文。