你如何避免使用样式=清除：使用浮动元素时？

Question

通常当我在容器div中有浮动元素时，我会有这样的东西：

<div class="container">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
  <div style="clear:both;"></div>
</div>

我觉得在每个流畅的布局上都有<div style="clear:both;"></div>非常烦人和丑陋。所以我尝试做这样的事情（使用css，但为了简单起见）：

<div class="container" style="clear:both;">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
</div>

并没有奏效。是否可以通过向.container类添加内容来使其工作？

Answer 1

.container {
    overflow: hidden; // causes the container to wrap its floated children
}

Answer 2

  

修改：只有在here解释的某些情况下才需要使用clearfix。 overflow: hidden是优越的方法。

有一种称为clearfix的技术不需要清除元素，并且在构建时非常注重跨浏览器兼容性。这导致了许多特定于浏览器的CSS，但可以将其集成到现有的样式表中。