Каков наилучший способ очистить стиль CSS "float"?

Ответ 1

Обновление. В 2014 году вы должны использовать метод clearfix, в котором использовались псевдоэлементы, подобные тому, который упоминается @RodrigoManguinho. Это современный способ очистки поплавков. Для еще более современного метода см. Nicholas Gallagher micro clearfix:

/**
 * 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; к родительскому элементу float (s), чтобы очистить их. Работает кросс-браузер, без проблем. Я считаю, что overflow: auto; также работает.

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

Узнайте больше об использовании overflow вместо clear, чтобы избежать добавления дополнительной разметки.

Ответ 2

Я обнаружил, что чаще всего (включая меня) этот метод используется в html:

<div class="clear"></div>

С этим в таблице стилей:

.clear {clear: both;}

Ответ 3

.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 или неправильном использовании переполнения или любых хаках.

Ответ 4

Там немного вуду, я, как правило, использую.

<span class="clear"></span> 

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

Эта комбинация волшебным образом фиксирует целый ряд проблем с браузером, и я только что использовал ее так долго, что забыл, какие проблемы она решает.

Ответ 5

Лучший способ - переполнение: auto; в контейнере div. Это более чисто.

div.container {overflow: auto;}

подробнее в: http://www.quirksmode.org/css/clearing.html

Ответ 6

Простое добавление 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;
}

Как и в любом другом методе, есть некоторые gotchas с overflow:auto;. Чтобы исправить их, примените max-width:100%; height: auto; для изображений и word-wrap: break-word; для текста, содержащегося в плавающих элементах.

[источник]

Ответ 7

jQuery UI имеет некоторые классы, чтобы исправить это также (ui-help-clearfix что-то делает).

Технически <div style="clear:both;"></div> лучше, чем <br style="clear:both;" />, потому что пустой div будет иметь высоту 0, тем самым просто очищая поплавки. <br /> оставит пробел. Я не вижу ничего плохого в использовании метода <div/>.

Ответ 8

Я сам из школы <br class='clear'/>, но другим решением может быть использование класса clear в элементе, который сразу же следует за плавающим. Итак вместо:

<div class='float_left'>...</div>
<br class='clear'/>
<div class='something_else'>...</div>

Вы могли назначить несколько классов элементу, который вы хотите очистить:

<div class='float_left'>...</div>
<div class='something_else clear'>...</div>

На практике, однако, я часто использую <br class='clear'/> довольно часто. Он работает хорошо, когда у вас есть элемент, плавающий внутри другого элемента, и его нужно очистить, чтобы родитель узнал высоту содержимого.

Ответ 9

.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>

Ответ 10

Проблема заключается в том, что родительские элементы не настраиваются на высоту своих плавающих дочерних элементов. Лучший метод, который я нашел, - это float родительский элемент, чтобы заставить его настраиваться с высотами его плавающих дочерних элементов, а затем применить ваш css clear к следующему элементу, который вы хотите очистить. Часто бывает необходимо добавить width:100%, так как без плавания родитель может неожиданно изменить ваш макет.

Как уже упоминалось, семантически лучше избегать разметки, не связанной с вашим контентом, например, <br> или <div> с классом clearfix.

Ответ 11

<div class='float_left'>

something else


<br style="clear:both;">
</div>

этот br не оставляет пробела.

Ответ 12

<br clear="all"/>

хорошо работает. Преимущество этого при использовании class= "clear" заключается в том, что он просто работает, и вам не нужно настраивать дополнительные правила в вашем css, чтобы сделать это.

Ответ 13

Еще один вариант - "Поплавок почти все", в котором вы плаваете родительский элемент с той же стороны, что и плавающий дочерний элемент.

Ответ 14

Я предпочитаю использовать с .clear {clear: both; } over.clear-fix: после бла-бла, потому что, когда вы смотрите на разметку, становится яснее, что происходит. Просто FYI здесь мой учебник по как использовать float и clear, который я написал некоторое время назад.