Каков наилучший способ очистить CSS-стиль "float"?
Я довольно привык очищать свои поплавки с помощью <br style="clear:both"/> но вещи постоянно меняются, и я не уверен, что это лучшая практика.
Доступен CSS-хак (из positioneverything), который позволяет достичь того же результата без очистки div. Но... они утверждают, что хак немного устарел, и вместо этого вам, возможно, стоит взглянуть на этот хак. Но.. после прочтения 700 страниц комментариев:) кажется, что в некоторых местах последний взлом не работает.
Я хотел бы избежать любых взломов JavaScript, потому что я хотел бы, чтобы очистка работала независимо от того, включен ли JavaScript.
Какова текущая лучшая практика для очистки div-ов независимо от браузера?
14 ответов
Обновление: в 2014 году вы должны использовать метод clearfix, использующий псевдоэлементы, такие как упомянутый @RodrigoManguinho. Это современный способ очистки поплавков. Для еще более современного метода, см. Микро-исправление Николаса Галлахера:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Оригинальный ответ:
Мне действительно не нравится использовать дополнительную несемантическую разметку, поэтому я избегаю использования очищающего элемента. Вместо того, чтобы просто применить overflow: hidden; к родителю поплавка (ов), чтобы очистить их. Работает кросс-браузерно, без проблем. я верю overflow: auto; тоже работает.
Очевидно, что это не сработает, если вы захотите использовать другое свойство переполнения, но из-за ошибки в раскрывающемся окне IE6 у меня редко возникает причина для преднамеренного переполнения моих контейнеров.
Смотрите больше информации по использованию overflow вместо clear чтобы избежать добавления дополнительной разметки.
Я обнаружил, что чаще всего (включая меня) этот метод используется в html:
<div class="clear"></div>
С этим в таблице стилей:
.clear {clear: both;}
.clear-fix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear-fix
{
zoom: 1;
}
<div class="clear-fix">
<div class="left">Some Div With Float</div>
<div class="left">Another Div With Float</div>
</div>
На мой взгляд, это лучший способ. Нет необходимости в дополнительных элементах DOM или неправильном использовании переполнения или каких-либо взломов.
Есть немного вуду, которым я склонен пользоваться.
<span class="clear"></span>
span.clear {
display: block;
clear: both;
width: 1px;
height: 0.001%;
font-size: 0px;
line-height: 0px;
}
Эта комбинация волшебным образом устраняет целый ряд проблем с браузером, и я просто использовал ее так долго, что забыл, какие проблемы она решает.
Лучший способ это поставить "переполнение: авто;" в контейнере div. Это более чисто.
div.container {overflow: auto;}
более подробная информация на сайте: http://www.quirksmode.org/css/clearing.html
Просто добавив overflow:auto; родительский элемент, содержащий плавающий элемент (ы), является отличным решением в большинстве случаев.
ОБРАЗЕЦ HTML:
<div class="container">
<div class="child">...</div>
<div class="another-child">...</div>
<div>
CSS:
.child {
float: right;
word-wrap: break-word;
}
.child img {
max-width: 100%;
height: auto; /* of course, this is default */
}
.child p {
word-wrap: break-word;
}
.container {
overflow: auto;
}
Как и с любым другим методом, есть некоторые ошибки с overflow:auto; также. Для того, чтобы исправить их - применить max-width:100%; height: auto; для изображений и word-wrap: break-word; для текста, содержащегося в плавающих элементах.
[ источник]
Теперь, в 2021 году, вместо хака clearfix можно использовать родительский элемент.
.box {
display: flow-root;
}
По состоянию на март 2021 года 91,35% браузеров по всему миру могут обрабатывать
display: flow-root, на основе данных Могу ли я использовать .
В jQuery UI есть несколько классов, чтобы это исправить (ui-help-clearfix делает что-то)
технически <div style="clear:both;"></div> лучше, чем <br style="clear:both;" /> потому что пустой div будет иметь высоту 0, тем самым просто очищая поплавки. <br /> оставит место Я не вижу ничего плохого в использовании <div/> метод.
Проблема в том, что родительские элементы не подстраиваются под высоту всплывающих дочерних элементов. Лучший метод, который я нашел, это float родительский, чтобы заставить его приспосабливаться к высоте его всплывающих дочерних элементов, а затем применить ваш CSS clear к следующему элементу, который вы на самом деле хотите очистить. Часто необходимо добавить width:100% также, так как без плавающего родитель может неожиданно изменить ваш макет.
Как уже упоминалось, семантически лучше избегать разметки, не связанной с вашим контентом, таким как <br> или же <div> с классом clearfix.
.floatWrapper {
overflow:hidden;
width:100%;
height:100%;
}
.floatLeft {
float:left;
}
<div class="floatWrapper">
<div class="floatLeft">
Hello World!
</div>
<div class="floatLeft">
Whazzzup!
</div>
</div>
<div class='float_left'>
something else
<br style="clear:both;">
</div>
этот br не оставит места.
<br clear="all"/>
хорошо работает также. Преимущество этого по сравнению с использованием class="clear" заключается в том, что он просто работает, и вам не нужно устанавливать дополнительные правила в css, чтобы сделать это.
Еще один вариант - "плавать почти все", при котором родитель плавает с той же стороны, что и плавающий ребенок.
Я предпочитаю использовать с.clear { clear: both; } over .clear-fix: после бла-бла, потому что, когда вы смотрите на разметку, становится яснее, что происходит. Просто к вашему сведению, вот мой урок о том, как использовать float и clear, который я написал некоторое время назад.