css – Wrapper div height为0,浮动元素在里面

我有一个包装< div>它包含两个浮动的内部< div> s.

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

问题是包装器< div>宽度为80px,因为两个内部< div>每个都是40px.但总是包装< div>高度为0px,使得边框在顶部显示为一行.

所以我把两个内部< div>放在< table>里面.它运作良好但是,如果没有找到< table>？

解决方法

设置溢出：隐藏在父级上.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>