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

17

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

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

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

    
задан Tom 13.07.2011 в 17:50
источник
  • Можете ли вы показать какой-то код для непосвященного для демонстрации этой проблемы? –  Chris Farmer 13.07.2011 в 17:52
  • clear: обе часто требуется для перемещения содержимого под элементом с плавающей точкой. Существует (как правило) ничего плохого в использовании. –  George Cummins 13.07.2011 в 17:53
  • возможный дубликат В 2011 году, есть ли необходимость в clearfix? и Какой метод «clearfix» лучше? –  BoltClock♦ 13.07.2011 в 18:03
  • Также полезно: какой метод clearfix лучше всего –  George Cummins 13.07.2011 в 18:12
  • @George, это отличная ссылка, спасибо. –  Nicole 13.07.2011 в 19:22

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 к этому контейнеру.

    
ответ дан Nicole 13.07.2011 в 17:53
источник
  • Он хочет избегать использования ясного: both ;. –  kba 13.07.2011 в 17:54
  • @ Kristian - Я не рассматривал этот вопрос таким образом. Я интерпретировал это, чтобы сказать, что он хочет избежать «кода, пронизанного <div>», другими словами, после размещения элементов <div style="clear: both;">. Это точное решение для этого. –  Nicole 13.07.2011 в 17:57
  • @ Кристиан Антонсен Нет, он хочет избежать пустых div с ясным: оба. Этот класс clearfix должен быть добавлен в контейнер, который содержит плавающие элементы. Если это будет сделано, он избавится от пустых div. –  DanielB 13.07.2011 в 17:57
  • @Renesis, @ DanielB Если это так, я считаю (по большей части) все еще есть способы избежать использования. Тем не менее, все еще ждут демоверсии. –  kba 13.07.2011 в 18:01
  • Это может в тех же случаях быть именно тем, что вам нужно. Хотя этот вариант дает меньшую гибкость при создании сайтов, отвечающих требованиям. ясно: то и другое; является уродливым, но он работает. –  WIWIWWIISpitFire 19.06.2014 в 09:41
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
источник