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

Question

Как веб-разработчик, я часто получаю два плавающих (дочерних) элемента 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 к родительскому классу.
2) Добавьте третьего «очищающего» ребенка <br style="clear:both;" />.

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

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

Answer 1

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

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

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

4. Вы также можете использовать метод сгенерированного контента:

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

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

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

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

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

Answer 2

PPK обсуждает это в Очистка поплавков в QuirksMode.

Answer 3

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