html - 使用浮动元素时如何避免 style = clear:both？

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？

score 8 · Accepted Answer

8

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

于 2011-04-06T11:24:15.727 回答

score 4 · Accepted Answer

编辑：只有在某些情况下才需要使用 clearfix，如此处所述。overflow: hidden 是上乘的方法。

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

2 回答 2