前面的div浮動和摺疊

Question

我已經浮動的div，後面跟着一個非浮動div。下面的div忽略浮動div的高度。什麼CSS命令失蹤，以防止這種情況？

js fiddle

HTML

<div class="wrap"> 
    <div class="left">left</div> 
    <div class="right">right</div>  
    <div class="bottom">bottom</div>  

CSS

.wrap{  
    width: 400px; 
    height: 350px; 
    background-color: grey; 
} 

.left{ 
    width: 150px; 
    height: 150px; 
    background-color: blue; 
    position : relative; 
    float: left; 
} 


.right{ 
    width: 150px; 
    height: 150px; 
    background-color: red; 
    position : relative; 
    float: right; 
} 

.bottom{ 
    width: 200px; 
    height: 100px; 
    background-color: green; 
    position : relative; 
} 

Answer 1

嘗試添加一個明確的重置浮動是這樣的：

<div class="wrap"> 
    <div class="left">left</div> 
    <div class="right">right</div> 
    <div style="clear:both;"></div> 
    <div class="bottom">bottom</div> 

</div> 

通常是有一個名爲clear內的CSS，使這件事情像類的好方法：

.clear{ 
    clear:both; 
} 

，並用它一個div或者像BR內：

<div class="clear"></div> 

或

<br class="clear" /> 

DEMO

Answer 2

您需要清除浮標。

HTML：

<div class="wrap"> 
    <div class="left">left</div> 
    <div class="right">right</div> 
    <div class="clr"></div> 
    <div class="bottom">bottom</div>   
</div> 

CSS：

.clr{clear:both;} 

Updated fiddle here.