集裝箱格沒有被包含表填充

Question

我有一個div包含兩個其他的div，一個浮動到右邊，一個在左邊，並且這兩個內部DIV都有一個表。我需要最外層的div來包含它的div，但不是。看起來好像內部div不包含內部表格。因爲最外面的div有一個邊框，所以我可以看到它的高度比包含的內容短很多。

<style> 
.bluebox{ border:1px solid blue; } 
.floatleft 
{ 
float:left; 
} 
.floatright 
{ 
float:right; 
} 
</style> 

這是我的HTML：

<div class='bluebox'> 

    <div class='floatleft'> 
    <table cellspacing=10> 
    <tr><td class='head'> Qty ordered: </td><td> 100</td> </tr> 
    <tr><td class='head'> Description: </td><td> Business Card</td></tr> 
    <tr><td class='head'>Stock: </td><td> SPRONDIGRLE WHITE</td></tr> 
    <tr><td class='head'>Lamination: </td><td> XXX</td></tr> 
    </table> 
    </div> 

    <div class='floatright'> 
    <table cellspacing=10> 
     <tr><td class='head'> Parent A3 Sheets: </td><td>XXX </td></tr> 
     <tr><td class='head'>Finish Size: </td><td> 9 x 5cm</td></tr> 
     <tr></tr> 
     <tr><td class='head'>Finishing touches: </td><td> Rounded corners</td></tr> 
    </table> 
    </div> 

</div> 

因爲我需要的邊框顯示，我不能這樣做padding-bottom:-5000px; overflow:hidden，因爲那時邊境將由英里舒展的頁面！

Answer 1

您需要清除浮標。要做到這一點，最簡單的方法是，像這樣：

.bluebox{ border:1px solid blue; overflow: hidden } 

http://jsfiddle.net/LBfxY/

還有其他的方法可以做到這一點，但使用溢出是最簡潔的。以下是一些關於其他clearfix技術的演示：

http://codepen.io/cimmanon/pen/qDjdr