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

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

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

overflow属性可以用来清除没有额外标记的浮点数:

.container { overflow: hidden; }

这适用于所有浏览器，除了IE6，你所需要做的就是启用hasLayout(缩放是我的首选方法):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

我们要解决什么问题?

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

包含子浮动。这意味着所讨论的元素使自己足够高，以包装所有浮动后代。(他们不会在外面闲逛。) 将子代与外部浮标隔离。这意味着元素内部的后代应该能够使用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的一切都是错误的。

.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}

使用LESS (http://lesscss.org/)，你可以创建一个方便的clearfix helper:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

然后将其用于有问题的容器，例如:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

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