Как не использовать <div class = "clear"> в разметке - PullRequest
Новая
       5

Как не использовать <div class = "clear"> в разметке

17 голосов
/ 13 июля 2011

Все время мой код пронизан символами <div>, которые используются для очистки / расширения div, чтобы он выглядел правильно. Всякий раз, когда это выглядит неправильно, я добавляю <div style="clear:both;">, и это исправляет проблему в IE7.

Как мне избежать этого? Я связываюсь с overflow:auto, overflow:hidden и ничего не получаю.

Заранее спасибо

Ответы [ 3 ]

34 голосов
/ 13 июля 2011

Одним из распространенных методов является класс clearfix. Вместо того, чтобы нуждаться в посторонних элементах <div style="clear:both;"> (как вы это делали) после плавающего элемента, вы просто добавляете этот класс к самому плавающему элементу * , и макет автоматически очищается после него. 1

Мой любимый из http://perishablepress.com/press/2009/12/06/new-clearfix-hack. Он поддерживает современные браузеры, а также IE6 и IE7. 

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Пример (старый / плохой): 

<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>

Пример (новый с clearfix): 

<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>

1: Примечание: автоматическая очистка означает, что она лучше всего работает с одиночными плавающими элементами. Если вы хотите, чтобы несколько элементов плавали рядом друг с другом, поместите их все в один контейнер, который также всплывает, и примените clearfix к этому контейнеру.

3 голосов
/ 13 июля 2011

если всплывающее окно переполнено: скрыто;на контейнере с плавающими элементами, которые должны работать!не знаю, как это кросс-браузер однако.

1 голос
/ 07 января 2014

In Cascade Framework Я применяю микро-очистку по умолчанию для элементов уровня блока.Это позволяет избежать использования таких вещей, как <div style="clear:both;"> или <div class="clearfix">, но с минимальными побочными эффектами.И если вы действительно хотите традиционное поведение для элементов уровня блока, абсолютное позиционирование должно помочь.Проверьте Cascade Framework , чтобы самим понять, насколько это практично.

...