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

容器div未由包含的表填充

1 个答案: