Что лучший способ состоит в том, чтобы очистить стиль CSS “плавание”?

Я нашел, что чаще всего (сам включенный), этот метод используется в HTML:

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

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

.clear {clear: both;}

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

/**
 * 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, чтобы не добавлять дополнительную разметку .

существует немного вуду, который я склонен использовать.

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

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

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

<br clear="all"/>

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

UI jQuery имеет некоторые классы для фиксации этого также (ui-help-clearfix, делает что-то).

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

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