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

17

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

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

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

    
задан Tom 13.07.2011 в 17:50
источник

3 ответа

34

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

Мой любимый из Ссылка . Он поддерживает современные браузеры, а также 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 к этому контейнеру.

    
ответ дан NicoleC 13.07.2011 в 17:53
источник
3

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

    
ответ дан Treemonkey 13.07.2011 в 18:01
источник
1

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

    
ответ дан John Slegers 07.01.2014 в 20:08
источник