В зависимости от разрабатываемого дизайна каждое из приведенных ниже 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" />теги, замусоренные вокруг разметки.
