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

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

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

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

Ответ 1

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

Мой любимый из 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 к этому контейнеру.}

Ответ 2

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

Ответ 3

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