css - 容器 div 未由包含的表填充

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，因为边框会将页面拉伸(stretch)数英里!

Answer 1

您需要清除 float 。最简单的方法如下:

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

http://jsfiddle.net/LBfxY/

还有其他方法可以做到这一点，但使用 overflow 是最简洁的。以下是其他 clearfix 技术的一些演示:

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