0

我有一个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的事情，因为这样边框会将页面拉伸数英里！

4

1 回答 1

2

你需要清除你的浮动。最简单的方法是这样的：

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

http://jsfiddle.net/LBfxY/

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

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

于 2013-03-16T16:59:40.783 回答