Пущенные в ход Дочерние Элементы: overflow:hidden или clear:both?
Как веб-разработчик у меня часто будет два пущенных в ход (дочерних) отделения в другом (родительском) отделении На самом деле, я целый день делаю это.
<style type="text/css">
#left {float:left;}
#right {float:right;}
</style>
<div id="parent">
<div id="left" class="child"> </div>
<div id="right" class="child"> </div>
</div>
Это не работает без дополнительного бита css/html, потому что родитель автоматически не растет для установки пущенным в ход детям. Существует два популярных способа преодолеть это:
1) Добавить overflow:hidden к CSS родителя.
2) Добавьте 3-го ребенка "очистки" <br style="clear:both;" />.
Я знаю, что существует несколько других подобных вопросов о таких вещах, но мой вопрос:
Какой метод лучше и почему? Каковы за и против каждого?
3 ответа
Скрытое переполнение - довольно солидный метод. Главный недостаток - если вы установите высоту родительского элемента, любое переполнение будет ... ну, скрытым. Я обнаружил это при создании меню с элементами плавающего списка - подменю не появлялись.
Очищающий элемент - вместо разрыва строки я бы использовал div с
height: 0; clear: both;, так как это не создаст зазора внизу. Это более надежный метод, единственным недостатком которого является лишний элемент в разметке.Плавающий родительский элемент - по моему опыту, слишком много ситуаций, когда вы не хотите перемещать родительский элемент, поэтому я бы избегал этого.
Вы также можете использовать сгенерированный метод содержимого:
#parent: after { content: "."; visibility: hidden; clear: both; { {1}}}Это избавляет от необходимости использовать дополнительный элемент в разметке, но не будет работать в IE7 и ниже.
Использовать встроенные блоки - только что вспомнил об этом методе. Вместо того, чтобы перемещать два столбца, установите для них
display: inline-block, и они будут отображаться рядом:.child { display: inline-block; {{ 1}} vertical-align: top; }При использовании этого метода вы должны помнить только о том, есть ли пробелы между закрывающим тегом одного блока и открывающим тегом другого , между столбцами появится пробел (размер которого зависит от шрифта, поэтому его трудно измерить). Пока вы выполняете
...
Второй совершенно не нужен и добавляет дополнительную разметку. Просто что-то еще пошло не так. Используйте первый, если он соответствует вашим требованиям. Вы также можете перемещать родительский элемент, чтобы сделать то же самое, хотя это может не соответствовать тому, что вы делаете.