
Всем доброго времени суток. Мы продолжаем серию уроков по блочной верстке.
И сегодня мне хотелось поговорить с Вами о методе Clearfix. Мы разберем, для чего он нужен и как правильно его использовать.
В начале своей карьеры вэб-мастера я довольно много времени убил на то, чтобы разобраться в этом вопросе, хотя в итоге все оказалось намного проще. Просто информацию пришлось собирать по крупицам.
Сейчас я дам Вам все в одном месте. Начнем...
Для начала давайте рассмотрим некую ситуацию. У нас есть:
- блок-родитель;
- плавающий блок, вложенный в блок-родитель;
- текст (или блок, или что угодно), который будет обтекать плавающий блок (нужен для демонстрации).
Вот пример кода:
<div class="parent"> <div class="floatBlock">Этот блок с float: left;</div> текст, который задаст высоту родителю </div> <div class="nextStaticBlock">Это следующий блок в общем потоке</div> |
Возникает несколько вопросов:
- Какую высоту в данном случае будет иметь блок-родитель (div class="parent")?
- Где расположится блок (div class="nextStaticBlock"), помещенный под блок-родитель?
По идее, следующий блок будет расположен под блоком-родителем, высота которого будет равна высоте самого высокого дочернего блока (в данном примере высоте плавающего блока):
Однако в реальности, следующий блок (в большинстве браузеров) действительно расположен под блоком-родителем, но высота родителя равна высоте статического (неплавающего) содержимого:
Вопрос решается вставкой небольшого фрагмента HTML и CSS кода.
Старое решение
Очищаем поток, используя дополнительный элемент, помещенный в конце блока родителя со свойством или атрибутом clear (<div style="clear: both;></div> или <br clear="all" />):
<div class="parent"> <div class="floatBlock">Этот блок с float: left;</div> текст, который задаст высоту родителю </div> <div style="clear: both;"></div> <div class="nextStaticBlock">Это следующий блок в общем потоке</div> |
Недостаток данного способа — появляется никому не нужный, портящий структурность и семантику кода блок. Зачастую с единственным назначением — это очистить поток.
Новое решение
Очищаем поток, используя псевдоэлемент :after
HTML:
<div class="parent"> <div class="floatBlock">Этот блок с float: left;</div> текст, который задаст высоту родителю </div> <div class="nextStaticBlock">Это следующий блок в общем потоке</div> |
CSS:
.parent:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} |
Очищаем поток с помощью overflow: hidden
Также для очистки потока есть более простой способ — добавить правило overflow: hidden родителю, который содержит плавающие элементы:
.parent { overflow: hidden; zoom: 1; /* for IE */} |
Метод более простой, но не всегда применим (например, когда родитель содержит абсолютно позиционируемые элементы, которые должны выходить за границы родителя. Пример — выпадающее меню).
Микро clearfix
Если не нужна поддержка IE6-7:
.parent:after { content: ""; display: table; clear: both;} |
Если нужна, тогда надежней использовать такой вариант:
/* For modern browsers */ .parent:before, .parent:after { content: ""; display: table;} .parent:after { clear: both;} /* для IE6-7 */ .parent { zoom: 1;} |
На этом мы закончим. Как видите, есть множество способов решить данную задачу. Какой из них использовать — решать Вам. Я лично использую разные способы в разных ситуациях.
Не забываем подписываться на обновления, и... Пока-пока!