Question

考虑以下代码，span元素在div内部浮动，如何使div环绕浮动子元素，以便1px边框包装儿童元素？

<div style="border:1px solid #000">
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
</div>

Answer 1

大多数情况下，在包装器上添加overflow:hidden就足够了：

<div style="border:1px solid #000; overflow:hidden;">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
</div>

有时候，你会看到这种替代方法（这种方式更加苛刻，但可能有更好的后版浏览器支持）。

<div style="border:1px solid #000; ">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <div style="clear:both;"></div>
</div>

Answer 2

根据MDN网络文档使用清除 CSS 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/clear

注意：如果元素仅包含浮动元素，则其高度将折叠为空。如果你希望它始终能够调整大小，以便它包含浮动元素，你需要自我清除它的子元素。这称为 clearfix ，其中一种方法是 clear 替换 :: after伪元素。
#container::after { 
  content: "";
  display: block; 
  clear: both;
}

如何让div包围漂浮的孩子？

2 个答案: