html - 两个 float 的 div 没有完全包含在父 div 中

Question

我的 fiddle :

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* div 是 float 的 div(这很棘手)。

我怎样才能将它们完全包含在里面？？

Answer 1

如果你把

溢出:隐藏；

在你的 .content 类上，然后它就可以工作了。