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

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
}