沒有裝修根據DIV

Question

我想整個#cont只需添加一個紅色邊框，但每當我浮這些三盒邊界不工作，只談到在上面不換所有的div.however我可以使用邊界在CSS 溢出：自動。它的工作原理，但我只是想知道爲什麼它不出去溢出工作。

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

飄來的div不會讓主div來根據childs.add額外股利成長保持主體高度。

<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> 

，並在框中CSS的新的div

.clrfx{ 
    clear:both; 
} 

Answer 2

使用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>

Answer 3

你需要清除浮動。 Css clear property 事情是這樣的：

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

See here.