How do I get a div to wrap around floating children?

Question

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?

<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

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>

Answer 2

Use the clear CSS property according to MDN web docs: 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.

#container::after { 
  content: "";
  display: block; 
  clear: both;
}