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

Considering the following code, where the span elements are floating inside of the div, how can I make the div wrap around the floating child elements, so that the 1px border wraps the children elements?

考虑下面的代码，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>

2 个解决方案

#1

Most of the time, adding overflow:hidden on the wrapper is sufficient:

大多数情况下，添加溢出：隐藏在包装器上就足够了：

<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>

Sometimes, you'll see this alternate approach (which is much more hacky, but probably has better back-version browser support).

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

<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>

#2

Use the clear CSS property according to MDN web docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

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

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called clearfix, and one way to do it is clear a replaced ::after pseudo-element on it.

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

#1