Плавающие дочерние элементы: переполнение: скрытое или четкое: оба?

Как веб-разработчик, я часто буду иметь два плавающих (дочерних) div внутри другого (родительского) div. На самом деле я делаю это весь день.

<style type="text/css">
    #left {float:left;}
    #right {float:right;}
</style>
<div id="parent">
    <div id="left" class="child">&nbsp;</div>
    <div id="right" class="child">&nbsp;</div>
</div>

Это не работает без дополнительного бита css/html, потому что родительский элемент автоматически не растет, чтобы соответствовать плавающим детям. Существует два популярных способа преодоления этого:
1) Добавьте overflow:hidden в родительский css.
2) Добавьте третьего" освобождающегося" ребенка <br style="clear:both;" />.

Я знаю несколько других подобных вопросов о таких вещах, но мой вопрос:

Какой метод лучше и почему? Какие являются плюсами и минусами каждого?

Ответы

Ответ 1

  • Скрытое переполнение - довольно солидный метод. Основным недостатком является установка высоты родительского элемента, любое переполнение будет... ну, скрыто. Я нашел это при создании меню с плавающими элементами списка - подменю не появлялись.

  • Очищающий элемент - а не разрыв строки, я бы использовал div с height: 0; clear: both;, так как он не будет создавать пробел ниже. Это более надежный метод, единственным недостатком которого является дополнительный элемент разметки.

  • Поплавьте родителя - по моему опыту слишком много ситуаций, когда вы не хотите плавать родительский элемент, поэтому я бы избегал этого.

  • Вы также можете использовать созданный метод контента:

    #parent:after {
  content: ".";
  visibility: hidden;
  clear: both;
}

    Это избавляет от необходимости добавления дополнительного элемента в разметку, но он не будет работать в IE7 и ниже.

  • Используйте встроенные блоки - просто вспомнил этот метод. Вместо того, чтобы плавать два столбца, установите их в display: inline-block, и они будут отображаться бок о бок:

    .child {
  display: inline-block;
  vertical-align: top;
}

    Единственное, что вы должны запомнить с помощью этого метода, - это пробел между тегом закрытия одного блока и открывающим тегом другого, между столбцами будет отображаться пробел (размер которого зависит от шрифта, так что это сложно рассчитать). Пока вы выполняете ...</div><div id=..., тогда этот метод работает отлично и превосходит плавающие элементы IMO.

Ответ 2

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