Все время мой код пронизан <div>, который используется для очистки/расширения div, чтобы выглядеть правильно. Всякий раз, когда это выглядит неправильно, я добавляю <div style="clear:both;"> и исправляет проблему в IE7.
Как мне избежать этого? Я общаюсь с overflow:auto, overflow:hidden, и ничего не получаю.
Заранее спасибо
Одним из распространенных методов является класс 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 к этому контейнеру.
если вы переполняете поток: hidden; на контейнере плавающих элементов, которые должны работать! dunno, как перекрестный браузер, однако.
В Cascade Framework Я применяю micro-clearfix по умолчанию для элементов уровня блока. Это позволяет избежать использования таких вещей, как <div style="clear:both;"> или <div class="clearfix">, но с очень минимальными побочными эффектами. И если вы действительно хотите традиционное поведение для элементов уровня блока, абсолютное позиционирование должно сделать трюк. Ознакомьтесь с Cascade Framework, чтобы получить представление о том, насколько практично это на самом деле.