Какие методы «clearfix» я могу использовать? - PullRequest
Новая
       85

Какие методы «clearfix» я могу использовать?

844 голосов
/ 17 октября 2008

У меня есть давняя проблема div, оборачивающая макет из двух столбцов. Моя боковая панель всплыла, поэтому мой контейнер div не может обернуть содержимое и боковую панель. 

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Похоже, существует множество способов исправления ошибки в Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

В моей ситуации единственное, что, кажется, работает правильно - это решение <br clear="all"/>, которое немного неопрятно. overflow:auto дает мне мерзкие полосы прокрутки, а overflow:hidden обязательно должен иметь побочные эффекты. Кроме того, IE7, очевидно, не должен страдать от этой проблемы из-за его неправильного поведения, но в моей ситуации он страдает так же, как Firefox.

Какой метод, доступный в настоящее время для нас, является наиболее надежным?

Ответы [ 28 ]

2 голосов
/ 08 апреля 2015

В отличие от других исправлений, здесь есть открытый без контейнеров

Другие исправления либо требуют, чтобы плавающий элемент находился в хорошо размеченном контейнере, либо требуют дополнительного семантически пустого <div>. И наоборот, четкое разделение содержимого и разметки требует строгого решения CSS для этой проблемы.

Сам факт того, что нужно отметить точку с плавающей точкой, не позволяет автоматической установки набора CSS-кода .

Если последняя является вашей целью, то плавающее поле должно быть оставлено открытым для того, чтобы что-либо (параграфы, упорядоченные и неупорядоченные списки и т. Д.) Можно было обернуть вокруг него до тех пор, пока не встретится «clearfix». Например, clearfix может быть установлен новым заголовком.

Именно поэтому я использую следующий код с новыми заголовками: 

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Это решение широко используется на моем веб-сайте для решения проблемы: текст рядом с плавающей миниатюрой короткий, а верхнее поле следующего очищаемого объекта не соблюдается.

Также предотвращает любое ручное вмешательство при автоматической генерации PDF с сайта. Вот пример страницы .

2 голосов
/ 20 мая 2011

Зачем просто пытаться использовать css hack, чтобы выполнить то, что выполняет 1 строка HTML. И почему бы не использовать семантический html tu put break для возврата к строке?

Для меня действительно лучше использовать: 

<br style="clear:both" />

И если вам не нужен какой-либо стиль в html, вы просто должны использовать класс для перерыва и вставьте .clear { clear:both; } в свой CSS.

Преимущество этого:

  • Семантическое использование html для возврата в строку
  • Если CSS не загружается, он будет работать
  • Не нужен дополнительный код CSS и взломать
  • не нужно имитировать br с помощью CSS, он уже существует в HTML
2 голосов
/ 07 января 2014

Я всегда использую micro-clearfix : 

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

В Cascade Framework Я даже применяю его по умолчанию для элементов уровня блока. IMO, применяя его по умолчанию к элементам уровня блока, дает элементам уровня блока более интуитивное поведение, чем их традиционное поведение. Кроме того, мне стало намного проще добавлять поддержку старых браузеров в Cascade Framework (который поддерживает IE6-8, а также современные браузеры).

2 голосов
/ 19 июня 2011

Предполагается, что вы используете эту структуру HTML: 

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

Вот CSS, который я бы использовал: 

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Я использую этот набор все время, и он прекрасно работает даже для меня в IE6.

0 голосов
/ 17 октября 2008

Вы пробовали это: 

<div style="clear:both;"/>

У меня не было проблем с этим методом.

0 голосов
/ 10 марта 2016

Мой любимый метод - создать класс clearfix в моем документе css / scss, как показано ниже 

.clearfix{
    clear:both
}

А затем вызовите его в моем HTML-документе, как показано ниже 

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>
0 голосов
/ 02 апреля 2011

Вы также можете поместить это в свой CSS: 

.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */

И добавьте класс "cb" в родительский div: 

<div id="container" class="cb">

Вам не нужно будет ничего добавлять к вашему исходному коду ...

0 голосов
/ 08 марта 2013 

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>
Страница:
...