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

864

У меня есть давняя проблема 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.

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

Крис Дж Аллен
источник
1
Я использую jqui.net/tips-tricks/css-clearfix, это помогает мне скрыть точку :)
Val
1
А как насчет IE 6 и IE 7? Они никогда не следуют правильному способу очищения вещей.
Правин Кумар Пурушотаман
Прошёл год, есть ли шанс пересмотреть правильный ответ на современный трехстрочный код, описанный здесь , который используется в известных средах Bourbon и Inuit.css? Смотрите мой ответ ниже .
Ионо

Ответы:

1039

В зависимости от разрабатываемого дизайна каждое из приведенных ниже CSS-решений clearfix имеет свои преимущества.

У clearfix есть полезные приложения, но он также использовался как взлом. Прежде чем использовать clearfix, возможно, эти современные css-решения могут быть полезны:


Современные решения Clearfix


Контейнер с overflow: auto;

Самый простой способ очистить плавающие элементы - использовать стиль overflow: autoдля содержащего элемента. Это решение работает во всех современных браузерах.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

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

Использование 'overflow: hidden' также является решением с явным исправлением, но не будет иметь полос прокрутки, однако использование обрезает hiddenлюбой контент, расположенный за пределами содержащего элемента.

Примечание. Элемент с плавающей imgточкой в ​​этом примере является тегом, но это может быть любой элемент HTML.


Clearfix Reloaded

Тьерри Кобленц из CSSMojo написал: «Перезагружен самый последний код» . Он отметил, что отказавшись от поддержки oldIE, решение можно упростить до одного оператора css. Кроме того, использование display: block(вместо display: table) позволяет корректно сворачивать поля, если элементы с clearfix являются братьями и сестрами.

.container::after {
  content: "";
  display: block;
  clear: both;
}

Это самая современная версия clearfix.


Старые решения Clearfix

Приведенные ниже решения не являются необходимыми для современных браузеров, но могут быть полезны для таргетинга на старые браузеры.

Обратите внимание, что эти решения основаны на ошибках браузера и поэтому должны использоваться только в том случае, если ни одно из указанных выше решений не работает для вас.

Они перечислены примерно в хронологическом порядке.


«Beat That ClearFix», исправление для современных браузеров

Тьерри Кобленц из CSS Mojo отметил, что когда мы нацеливаемся на современные браузеры, теперь мы можем отбросить zoomи ::beforeсвойство / значения и просто использовать:

.container::after {
    content: "";
    display: table;
    clear: both;
}

Это решение не поддерживает IE 6/7 ... специально!

Тьерри также предлагает: « Слово предостережения : если вы начинаете новый проект с нуля, сделайте это, но не меняйте эту технику на ту, которая у вас есть сейчас, потому что, даже если вы не поддерживаете oldIE, ваши существующие правила мешают рушится поля ".


Micro Clearfix

Самое последнее и всемирно принятое решение clearfix, Micro Clearfix от Николаса Галлахера .

Известная поддержка: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Свойство переполнения

Этот базовый метод предпочтителен для обычного случая, когда позиционированный контент не будет отображаться за пределами контейнера.

http://www.quirksmode.org/css/clearing.html - объясняет, как решить общие проблемы, связанные с этой техникой, а именно, настройку width: 100%контейнера.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Вместо того, чтобы использовать displayсвойство для установки «hasLayout» для IE, можно использовать другие свойства для запуска «hasLayout» для элемента .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Другой способ очистить поплавки с помощью этого overflowсвойства - использовать хак с подчеркиванием . IE будет применять значения с префиксом подчеркивания, другие браузеры - нет. zoomСвойство вызывает hasLayout в IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Хотя это работает ... не идеально использовать хаки.


ПИРОГ: легкий метод очистки

Этот старый метод «Easy Clearing» имеет преимущество, заключающееся в том, что позиционируемые элементы могут висеть за пределами контейнера, за счет более сложного CSS.

Это решение довольно старое, но вы можете узнать все о Easy Clearing на позиции все: http://www.positioniseverything.net/easyclearing.html


Элемент, использующий свойство clear

Быстрое и грязное решение (с некоторыми недостатками), когда вы быстро что-то ударили:

<br style="clear: both" /> <!-- So dirty! -->

Недостатки

  • Это не отвечает и, следовательно, может не обеспечить желаемого эффекта, если стили макета изменяются в зависимости от медиа-запросов. Решение в чистом CSS является более идеальным.
  • Он добавляет HTML-разметку без необходимости добавления какого-либо семантического значения.
  • Это требует встроенного определения и решения для каждого экземпляра, а не ссылки на класс на единственное решение «clearfix» в CSS и ссылки на классы в html.
  • Это затрудняет работу с кодом для других, поскольку им, возможно, придется написать больше хаков, чтобы обойти его.
  • В будущем, когда вам понадобится / вы захотите использовать другое решение clearfix, вам не придется возвращаться назад и удалять все <br style="clear: both" />теги, замусоренные вокруг разметки.
Бо Смит
источник
25
@David Rivers: Метод: after не является хаком, так как он не использует ошибку синтаксического анализа в браузере, он использует функцию css в качестве решения. Дополнительно: after будет поддерживаться в будущих браузерах, в отличие от хакерских знаков. В идеале должно быть свойство css, которое можно применить к элементу, в результате чего он будет содержать весь его контент.
Бо Смит
7
Спасибо за срыв. Я считаю, что метод "after easy clearing" превосходит "overflow: hidden", так как он не обрезает тени блока CSS3 или позиционированные элементы. Дополнительные строки кода определенно стоят того.
Aneon
7
Я не отстаиваю ясность: оба решения, но я не согласен с вашей «грязной» маркировкой. Аргумент «добавление веса / загрузки медленнее» кажется глупым, поскольку он представляет собой 1 короткую строку HTML-кода по сравнению с несколькими строками CSS (которые также должен загружать ваш браузер). Для аргумента «семантическая ценность», br с ясным: и то, и другое гораздо проще понять, чем пытаться выяснить кучу тупых стрелков из css. Ясно: оба коротки и просты, и imho не влияет на «профессионализм».
Вигронд
16
Вопреки распространенному мнению, overflow: hiddenили overflow: autoне очищает поплавки (классифицировать его как «clearfix» является неправильным); вместо этого он заставляет элемент создавать новый контекст форматирования, в котором могут содержаться числа с плавающей точкой. Это заставляет контейнер растягиваться до высоты поплавков для их удержания. Никакой очистки не требуется - при этом вы все равно можете очистить или не очистить поплавки внутри контейнера в зависимости от вашей компоновки.
BoltClock
3
Мы не должны больше поддерживать IE7. Пожалуйста , обновите это с три строки метода , описанного здесь
ионосферные
70

Какие проблемы мы пытаемся решить?

Есть два важных соображения, когда плавающие вещи:

  1. Содержит потомок плавает. Это означает, что рассматриваемый элемент становится достаточно высоким, чтобы обернуть всех плавающих потомков. (Они не висят снаружи.)

    Плавающий контент висит вне контейнера

  2. Изоляция потомков от внешних поплавков. Это означает, что потомки внутри элемента должны иметь возможность использовать clear: bothего и не взаимодействовать с плавающими элементами вне элемента.

    <code> clear: оба </ code> взаимодействуют с плавающей точкой в ​​другом месте в DOM

Блокировать контексты форматирования

Есть только один способ сделать оба этих. И это установить новый контекст форматирования блока . Элементы, которые устанавливают контекст форматирования блока, представляют собой изолированный прямоугольник, в котором поплавки взаимодействуют друг с другом. Контекст форматирования блока всегда будет достаточно высоким для визуального переноса его плавающих потомков, и никакие плавающие объекты вне контекста форматирования блока не могут взаимодействовать с элементами внутри. Эта двусторонняя изоляция - именно то, что вы хотите. В IE эта же концепция называется hasLayout , которую можно установить с помощьюzoom: 1 .

Есть несколько способов установить контекст блочного форматирования, но я рекомендую решение display: inline-blockс width: 100%. (Конечно, есть обычные предостережения с использованием width: 100%, так использования box-sizing: border-boxили положить padding, marginи borderна другой элемент.)

Самое надежное решение

Вероятно, наиболее распространенным применением поплавков является двухколонный макет. (Может быть расширен до трех столбцов.)

Сначала разметка структуры.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

А теперь CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Попробуй сам

Перейдите к JS Bin, чтобы поиграть с кодом и посмотреть, как это решение строится с нуля.

Традиционные методы исправления ошибок считаются вредными

Проблема с традиционными решениями clearfix заключается в том, что они используют две разные концепции рендеринга для достижения одной и той же цели для IE и всех остальных. В IE они используют hasLayout для установки нового контекста форматирования блока, но для всех остальных они используют сгенерированные box ( ) с , который не устанавливает новый контекст форматирования блока. Это означает, что вещи не будут вести себя одинаково во всех ситуациях. Для объяснения того, почему это плохо, см. Все, что вы знаете о Clearfix, неправильно .:afterclear: both

Крис Кало
источник
Каковы "обычные предостережения с использованием width: 100%"? Кроме того, вы предлагаете использовать zoom: 1в § 1 из § 2?
Баумр
Интересный ответ, но как насчет того overflow: hidden, что концепция рендеринга это вызывает? И чем это может отличаться hasLayout?
Баумр
Верно, но если кто-то избегает использования position: absolute, то это нормально и будет частью той же концепции рендеринга?
Баумр
Понимаю. Под понятием рендеринга я имел в виду, overflow: hiddenреализует ли такая вещь, которая отличается от того, что делает hasLayout?
Баумр
2
Подробнее об этом можно узнатьhasLayout на stackoverflow.com/questions/1794350/what-is-haslayout . Я думаю, что это синонимично с установлением нового контекста форматирования блока. Элементы, которые делают это, несут основную ответственность за макет всех своих дочерних элементов. Одним из результатов этого является то, что элементы, которые устанавливают новый контекст форматирования блока, содержат плавающие потомки и плавающие вне элемента не взаимодействуют с clear: left|right|bothэлементами внутри. (Это в ответе выше.)
Крис Кало
54

Новый стандарт, используемый Inuit.css и Bourbon, - две широко используемые и хорошо поддерживаемые платформы CSS / Sass:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Ноты

Имейте в виду, что исправления ошибок по сути являются хаком для того, что макеты flexbox теперь могут обеспечить намного более разумным способом . Первоначально CSS-плавающие элементы были предназначены для обтекания встроенного содержимого - как изображения в длинной текстовой статье, а не для разметки сетки и тому подобного. Если ваши целевые браузеры поддерживают flexbox , стоит посмотреть.

Это не поддерживает IE7. Вы не должны поддерживать IE7. Это продолжает подвергать пользователей незафиксированным уязвимостям безопасности и усложняет жизнь всем остальным веб-разработчикам, поскольку снижает нагрузку на пользователей и организации на переход на современные браузеры.

Это исправление было объявлено и объяснено Тьерри Кобленцем в июле 2012 года. Оно избавляет от лишнего веса из микроочистки Николя Галлахера 2011 года . В процессе он освобождает псевдоэлемент для вашего собственного использования. Это было обновлено, чтобы использовать display: blockвместо display: table(опять же, кредит Тьерри Кобленцу).

ионосферные
источник
3
Я надеюсь, что ваш ответ наберет больше голосов по этому вопросу, поскольку я полностью согласен с вами. Опять же, это 2013 год, и я искренне верю, что это решение, которое люди должны использовать.
Рафаэльбитен
2
Согласовано. theie7countdown.com Проверьте свою собственную аналитику и, надеюсь, вы увидите, что IE7 не стоит вашего времени.
Джастин
1
@ Джастин согласился; ваша личная аналитика выложит это. Однако я не думаю, что сайт обратного отсчета обновлялся в какое-то время - лучше всего использовать статистику caniuse, которая показывает, что IE7 на 0,39% во всем мире.
Ионо
1
Надеемся, что такие хаки, как clearfix, скоро станут ненужными благодаря использованию flexbox, а не float, для макета.
Ионо
Вы можете возражать против поддержки IE7 столько, сколько хотите, но если со стороны бизнеса требуется поддержка этих пользователей (по разным причинам - как правило, деньги), вы будете делать это независимо от того, как вы относитесь к проблеме
Крис Сельбекк
27

Я рекомендую использовать следующее, которое взято с http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}
Эрик Красный
источник
8
Кто сейчас помнит IE-mac? Зачем все усложнять из-за проблем, которые больше не актуальны?
Илья Стрельцын
23

Свойство overflow можно использовать для очистки чисел без дополнительной разметки:

.container { overflow: hidden; }

Это работает для всех браузеров, кроме IE6, где все, что вам нужно сделать, это включить hasLayout (масштабирование - мой предпочтительный метод):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Джек Слайт
источник
3
переполнение: скрытый не работает в браузере PS3. Не то чтобы большинству людей это нужно для работы, но это самая важная вещь, взрывающая мой сайт в PS3, на которую мы пытаемся ориентироваться по деловым причинам. Тьфу.
gtd
1
И это проблема, если вы действительно хотите, чтобы определенный контент зависал вне контейнера.
Саймон Ист
Переполнение: скрытый имеет плохой побочный эффект отсечения контента
Крис Кало
9
overflow:hiddenимеет эффект отсечения контента; у него есть побочный эффект очистки контейнера ;-)
Тамлин
Переполнение: auto также запускает контекст форматирования блока и не обрезает содержимое.
Гарри Роббинс
17

Я нашел ошибку в официальном методе CLEARFIX: у DOT нет размера шрифта. И если вы установите height = 0и первый элемент в вашем DOM-дереве имеет класс "clearfix", у вас всегда будет поле в нижней части страницы размером 12 пикселей :)

Вы должны исправить это так:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Теперь это часть YAML-макета ... Просто посмотрите на это - это очень интересно! http://www.yaml.de/en/home.html

Мартин
источник
15

Это довольно аккуратное решение:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Известно, что он работает в Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+.

Включение селектора: before необязательно для очистки поплавков, но предотвращает свертывание верхних полей в современных браузерах. Это обеспечивает визуальную согласованность с IE 6/7 при использовании масштаба: 1.

С http://nicolasgallagher.com/micro-clearfix-hack/

paulslater19
источник
1
Да, по состоянию на середину 2011 года это мое любимое решение. Это позволяет вам размещать объекты вне контейнера, если это необходимо (избегая overflow: hidden).
Саймон Ист
10

Clearfix от начальной загрузки:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
Эрик
источник
Из какой версии начальной загрузки это?
Эрик,
8

Я просто использую: -

.clear:after{
  clear: both;
  content: "";
  display: block;
}

Лучше всего работает и совместим с IE8 + :)

Салман фон Аббас
источник
Не будет работать в IE7, так как он не поддерживает псевдоэлементы CSS.
Сверхсветовой
4
... Вот почему он сказал "совместим с IE8 +". Большинству веб-сайтов больше не требуется поддержка IE7, их использование составляет менее 1% по всему миру. theie7countdown.com
Джастин
8

Учитывая огромное количество ответов, я не собирался публиковать. Однако этот метод может кому-то помочь, так как он мне помог.

Держитесь подальше от поплавков, когда это возможно

Стоит отметить, что я избегаю поплавков, таких как Эбола. Есть много причин, и я не одинок; Прочтите ответ Рикудо о том, что такое исправление, и вы поймете, о чем я. По его собственным словам:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Есть и другие хорошие (а иногда и лучшие) варианты, кроме поплавков. По мере развития и совершенствования технологий, flexbox (и другие методы) получат широкое распространение, и операции с плавающей точкой станут просто плохой памятью. Может быть CSS4?


Неправильное поведение Float и сбой очищает

Во-первых, иногда вы можете думать, что вы в безопасности от поплавков, пока ваш спасатель не проколется и ваш поток HTML не начнет снижаться:

В приведенном ниже коде http://codepen.io/omarjuvera/pen/jEXBya практика очистки поплавка с <div classs="clear"></div>(или другим элементом) распространена, но осуждается и антисемантична .

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Однако , только когда вы подумали, что ваш поплавок достоин паруса ... бум! По мере того, как размер экрана становится все меньше и меньше, вы видите странное поведение, как показано на рисунке ниже (То же http://codepen.io/omarjuvera/pen/jEXBya ):

пример ошибки поплавка 1

Почему ты должен заботиться? Я не уверен в точной цифре, но около 80% (или более) используемых устройств - это мобильные устройства с маленькими экранами. Настольные компьютеры / ноутбуки больше не являются королями.


Это не заканчивается

Это не единственная проблема с поплавками. Их много, но в этом примере некоторые могут сказать all you have to do is to place your floats in a container. Но, как вы можете видеть в коде и графике, это не так. Это, видимо, ухудшило ситуацию:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Что касается результата?

Это то же самое! пример ошибки 2

Как минимум, вы знаете, что вы создадите CSS-вечеринку, пригласив на нее все виды селекторов и свойств; создавая еще больший беспорядок в вашем CSS, чем то, с чего вы начали. Просто чтобы исправить твой поплавок.


CSS Clearfix на помощь

Этот простой и очень адаптируемый фрагмент CSS - это красота и «спаситель»:

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Это оно! Это действительно работает, не нарушая семантику, и я упоминал, что это работает? :

Из того же примера ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Теперь мы больше не нуждаемся <div classs="clear"></div> <!-- Acts as a wall -->и поддерживаем семантическую полицию счастливой. Это не единственное преимущество. Это исправление реагирует на любой размер экрана без использования@media в простейшем виде. Другими словами, он будет контролировать ваш поплавковый контейнер и предотвращать затопление. Наконец, он обеспечивает поддержку старых браузеров в одном небольшом отборе по каратэ =)

Вот снова исправление

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}
Омар
источник
2
Причина, по которой элемент с clearименем класса не работает, заключается в том, что ваш атрибут classневерен. То, что вы написали classs, с доп s.
Каштан
Ваш пример не демонстрирует то, на что вы претендуете, даже после исправления ошибок.
Восстановить Монику - Нотмейнард
7

Я всегда плаваю в основных разделах своей сетки и применяю clear: both;к нижнему колонтитулу. Это не требует дополнительного div или класса.

Нил Г
источник
Нил, я полагаю, что проблема возникает, когда вы хотите, чтобы границы вокруг обеих ваших колонок (или фонового цвета / изображения), вам нужен раздел-обертка, который нуждается в взломе.
Саймон Ист
5

честно говоря; все решения кажутся хаком, чтобы исправить ошибку рендеринга ... я не прав?

Я нашел <br clear="all" />самый простой, самый простой. видение class="clearfix"повсюду не может затронуть чувства того, кто возражает против посторонних элементов разметки, не так ли? Вы просто рисуете проблему на другом холсте.

я также использую display: hiddenрешение, которое прекрасно и не требует дополнительных объявлений классов или разметки html ... но иногда вам нужны элементы, например, для переполнения контейнера. красивые ленты и пояса

duggi
источник
5
overflow: hiddenЯ думаю, что вы имеете в виду
ajbeaven
Некоторые рекомендуют использовать класс под названием group, который делает вещи более семантическими. Я, честно говоря, не уверен, почему это не завоевало популярность
Дэймон
Я полностью отказываюсь от этой позиции. я просто сейчас использую clearfix. но на очень распространенных контейнерах я «запекаю» его в css, чтобы сократить загрязнение атрибутов класса. Кроме того, называть это «группа» кажется хорошим. меньше символов для ввода
duggi
5
.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}
Муса Батт
источник
4

Я перепробовал все эти решения, большой <html>элемент будет добавлен к элементу автоматически, когда я использую код ниже:

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

Наконец, я решил проблему с запасом, добавив font-size: 0;вышеупомянутый CSS.

Джон Сяо
источник
2
Это потому, что вы добавляете строку ., просто используйтеcontent: ""
Сорок
4

С SASS, ясно, что это:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

и он используется как:

.container {
    @include clearfix;
}

если вы хотите новый clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}
fernandopasik
источник
4

С LESS ( http://lesscss.org/ ) можно создать удобный помощник по очистке:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

А затем используйте его с проблемными контейнерами, например:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>
/* LESS */
div#container {
  .clearfix();
}
JMU
источник
4

Использование overflow:hidden/ autoи высота для ie6 будет достаточно, если плавающий контейнер имеет родительский элемент.

Любой из #test может сработать, чтобы приведенный ниже HTML-код очищал плавающие числа.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

В случаях, когда это отказывается работать с ie6, просто поместите родителя в исходное состояние, чтобы очистить float.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Никогда еще не требовалось никакого другого вида очистки. Может быть, так я пишу свой HTML.

Дракон
источник
1
Я хотел бы изучить ваш способ написания HTML без очистки каких-либо элементов. Не могли бы вы опубликовать несколько ссылок?
Starx
4

Новое отображаемое значение кажется заданию в одну строку.

display: flow-root;

Из спецификации W3: «Элемент генерирует блок контейнера блока и раскладывает его содержимое с помощью компоновки потока. Он всегда устанавливает новый контекст форматирования блока для своего содержимого».

Информация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

Shown Как показано в ссылке выше, поддержка в настоящее время ограничена, поэтому может быть полезна резервная поддержка, как показано ниже: https://github.com/fliptheweb/postcss-flow-root

Дэмиен Голдинг
источник
3

Я бы #contentтоже плавал , так как в обоих столбцах есть поплавки. Кроме того, потому что это позволит вам очистить элементы внутри #contentбез очистки боковой панели.

То же самое с оберткой, вам нужно сделать это контекстом форматирования блока, чтобы обернуть два столбца.

В этой статье упоминается несколько триггеров, которые вы можете использовать: блокировать контексты форматирования .

Тьерри Кобленц
источник
3

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

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Обычно вам нужно сделать что-то следующее:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

С clearfix вам нужно только

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
Gaurang
источник
2

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

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

<br style="clear:both" />

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

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

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

Предполагая, что вы используете эту структуру 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.

Тим Хейн
источник
2

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

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

Тот факт, что нужно пометить конец с плавающей точкой, не допускает автоматической верстки CSS .

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

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

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

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

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

Серж Строобандт
источник
2

Я всегда использую микро-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, а также современные браузеры).

Джон Слегерс
источник
0

Вы также можете поместить это в свой 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">

Вам не нужно будет добавлять что-либо еще в ваш оригинальный код ...

Hakan
источник
0

#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>

Випул Вагасия
источник
-2

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

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

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

Torkel
источник
2
Я думаю, суть в том, что мы пытаемся избежать как дополнительной разметки, так и встроенных стилей с помощью этого решения. Это зависит от того, который компромисс ваш счастливый с я полагаю
Sam Муррей Sutton
1
Проблема с этим методом в том, что в браузерах IE div имеет высоту, поэтому интервал будет отключен. Вот почему методы css устанавливают высоту и размер шрифта.
2010 года
вам нужно сказать <div style = "clear: both"> </ div> с правильным закрывающим тегом, чтобы он был надлежащим образом совместим с XHTML. У меня были проблемы с jQuery, когда я этого не делал
Simon_Weaver
1
По иронии судьбы «предполагается, что самозакрывающийся» <div/> является X (HT) ML-совместимым, но не HTML-совместимым , поэтому для документов, обслуживаемых text/htmlвсеми браузерами, он будет обрабатываться как закрытый тег. К сожалению, нет такой вещи, как самозакрывающиеся теги для text/htmlдокументов, независимо от типа документа .
Илья Стрельцын
-2

Мой любимый метод - создать класс 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>
Эрик
источник
-2

Это так просто. Clearfix очищает проблему, когда мы используем свойства float внутри элемента div. Если мы используем два элемента div, один как float: left; а другой как float: правильно; мы можем использовать clearfix для родителя элемента div. Если мы откажемся использовать clearfix, ненужные пробелы заполняются содержимым ниже и структура сайта будет нарушена.

Мохамед Аазиф
источник