#内容{浮动:左;} #栏{浮动:左;} .clear{明确:;显示:块;高度:0 px;宽度:0 px;溢出:隐藏;} < div id = "容器" > <div id="content">text 1 </div> . <div id="sidebar">text 2</div> . < div class = "清晰" > < / div > < / div >

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

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

与其他clearfix不同，这是一个没有容器的开放式clearfix

其他清除操作要么要求被浮动元素位于标记良好的容器中，要么需要额外的语义上为空的<div>。相反，明确分离内容和标记需要严格的CSS解决方案来解决这个问题。

仅仅因为需要标记浮点数的结尾，就不允许进行无人值守的CSS排版。

如果后者是你的目标，浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放，直到遇到“clearfix”。例如，clearfix可以通过一个新标题来设置。

这就是为什么我使用以下clearfix与新标题:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

这个解决方案在我的网站上被广泛使用，以解决以下问题:浮动的微型对象旁边的文本很短，下一个清除对象的上边距不受尊重。

它还可以防止从站点自动生成pdf时的任何人工干预。 这是一个示例页面。

我们要解决什么问题?

有两个重要的考虑浮动的东西:

包含子浮动。这意味着所讨论的元素使自己足够高，以包装所有浮动后代。(他们不会在外面闲逛。) 将子代与外部浮标隔离。这意味着元素内部的后代应该能够使用clear: both，并且不能与元素外部的浮点数交互。

块格式化上下文

There's only one way to do both of these. And that is to establish a new block formatting context. Elements that establish a block formatting context are an insulated rectangle in which floats interact with each other. A block formatting context will always be tall enough to visually wrap its floating descendants, and no floats outside of a block formatting context may interact with elements inside. This two-way insulation is exactly what you want. In IE, this same concept is called hasLayout, which can be set via zoom: 1.

有几种方法可以建立块格式化上下文，但我推荐的解决方案是display: inline-block with width: 100%。(当然，使用width: 100%时通常会有一些注意事项，所以使用box-sizing: border-box或将填充、边距和边框放在不同的元素上。)

最健壮的解决方案

float最常见的应用可能是双列布局。(可以扩展为三列。)

首先是标记结构。

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

现在是CSS。

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

自己试试吧

去JS Bin玩一下代码，看看这个解决方案是如何从头开始构建的。

传统clearfix方法被认为是有害的

传统的clearfix解决方案的问题是，它们使用两种不同的呈现概念来实现IE和其他所有人的相同目标。在IE中，他们使用hasLayout来建立一个新的块格式化上下文，但对于其他人来说，他们使用生成的框(:after)和clear: both，这不会建立一个新的块格式化上下文。这意味着事情不会在所有情况下都表现相同。关于为什么这样不好的解释，请参见您所知道的关于Clearfix的一切都是错误的。

如果浮动容器有父元素，在ie6中使用overflow:hidden/auto和height就足够了。

#测试中的任何一个都可以工作，下面所述的HTML可以清除浮动。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

如果这在ie6中不能正常工作，只需要浮动父节点来清除浮动。

#test {
  float: left; // using float to clear float
  width: 99%;
}

从来没有真正需要任何其他类型的清理。也许是我编写HTML的方式。

从引导程序Clearfix:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}