В зависимости от разрабатываемого дизайна каждое из приведенных ниже 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>
Один недостаток - использование определенных комбинаций полей и отступов на внешнем элементе может привести к появлению полос прокрутки, но это можно решить, поместив поля и отступы на другой родительский элемент.
Использование «переполнения: скрытое» также является решением для устранения неполадок, но не будет иметь полос прокрутки, однако при использовании 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 от Nicolas Gallagher .
Известная поддержка: 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! -->
1135 * Недостатки *
Он не реагирует и, следовательно, может не дать желаемого эффекта, если стили макета меняются в зависимости от медиазапросов. Решение в чистом CSS более идеальное.
Добавляет HTML-разметку без необходимости добавления какого-либо семантического значения.
Требуется встроенное определение и решение для каждого экземпляра, а не ссылка на класс для одного решения «clearfix» в CSS и ссылки на классы в html.
Это затрудняет работу с кодом для других, поскольку им, возможно, придется написать больше хаков, чтобы обойти его.
В будущем, когда вам понадобится / вы захотите использовать другое решение clearfix, вам не придется возвращаться назад и удалять каждый тег <br style="clear: both" />, замусоренный вокруг разметки.