集装箱格没有被包含表填充

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