Как я могу получить div, чтобы обернуть вокруг плавающих детей?

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

Используйте свойство clear CSS в соответствии с веб-документами MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Примечание: Если элемент содержиттолько всплывающие элементы, его высота рушится ни к чему.Если вы хотите, чтобы он всегда имел возможность изменять размер, чтобы он содержал плавающие элементы внутри него, вам необходимо самостоятельно очистить его дочерние элементы.Это называется clearfix , и один из способов сделать это - clear замененный :: после псевдоэлемента на нем.

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