两个浮动的div没有完全包含在父div中

Question

我的小提琴：

http://jsfiddle.net/yJdbF/17/

HTML：

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
</div>

CSS：

.container {
  margin-top : 65px;
}

.content {
  border : 10px solid green;
}

.span30 {
  width: 40%;
  background-color : red;
  float : left;
}
.span70 {
  width: 60%;
  background-color : blue;
  float : left;

}

div.span70和div.span30并不完全包含在div.content中。 span * divs是浮动的div（这很棘手）。

我怎样才能完全包含它们？

Answer 1

如果你把

溢出：隐藏;

在.content类上，然后就可以了。

Answer 2

你需要清除浮子。例如，使用Nicolas Gallagher micro clear-fix或仅使用overlow: hidden

.content {
    border : 10px solid green;
    overflow: hidden;
}

DEMO

Answer 3

您应该添加clearfix，请参阅更新的fiddle。

<强>的CSS

.clear {
  clear:both;
}

<强> HTML

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
    <div class="clear"></div>
</div>