根据div，css边框不合适

Question

我想在#cont上添加一个红色边框，但每当我浮动这三个框时，边框不起作用，它只是在顶部没有包装所有div。但是我可以使用 < em> overflow：auto。 它有效但我只是想知道为什么它不能用于溢出。

HTML：

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
</div>
<div id="foo">footer</div>

CSS：

#cont {
  width:950px;
  border:1px solid red;
}
.box {
  width:300px;
  height:100px;
  border:1px solid black;
  background-color:orange;
  float:left;       
}
#foo {
  width:100px;
  background-color:blue;
  clear:both;
}

Answer 1

你需要清除浮动。 Css clear property 像这样：

#cont:after {
    content: '';
    display: block;
    clear: both;
}

See here.

Answer 2

浮动div不会让主div根据childs.add增加一个div来维持主div高度。

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
    <div class ="clrfx" > </div>
</div>
<div id="foo"> footer </div>

和新div的css

.clrfx{
    clear:both;
}

Answer 3

在框中使用Display:inline-block属性

#cont{
width:950px;
border:1px solid red; 
float:left;
}
.box{
    width:300px;
     height:100px;
    border:1px solid black;
    background-color:orange;
       float:left;  
       display:inline-block;
}
#foo{
    width:100px;
    background-color:blue;
    clear:both;
}

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
</div>
<div id="foo"> footer </div>