Skype: am4iki

mail: tаv@webzаvоd.nеt

Clearfix на CSS

13 Октябрь 2015
Теги

Сегодня я бы хотел рассмотреть метод Clearfix. Разобраться для чего он нужен, какие виды есть и как его использовать.

Приступим!

У нас есть некий код в котором есть:

  • родительский блок;
  • плавающий(float) блок, вложенный в родительский блок;
  • текст(блок, картинка или что вашей душе угодно после всунуть :).

Вот примерный код:

<div class="parentBlock">
    <div class="floatBlock">Блок с float: left;</div>
    текст, который задаст высоту родительскому блоку
</div>
<div class="nextBlock">Следующий какой-то блок в общем потоке</div>

У нас есть вопросы:

  • Какая высота будет у родительского блока div class="parentBlock"?
  • Как будет располагаться блок div class="nextBlock"?

Вы думаете следующий блок будет находиться под родительским блоком, высота которого будет ровняться высоте самого высокого дочернего блока(в примере ниже высота плавающего блока): clearfix1 Но в реальности, статичный блок следующий за родительским блоком(в большей части браузеров) будет расположен под блоком родительским, но высота родительского блока будет равна высоте статического(не плавающего) содержимого: clearfix2 Есть решение этой проблемы.

Старое решение

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

<div class="parentBlock">
<div class="floatBlock">Блок с float: left;</div>
текст, который задаст высоту родительскому блоку
</div>
<div style="clear: both;"></div>
<div class="nextBlock">Следующий какой-то блок в общем потоке</div>

Недостаток - появляется элемент, который нарушает структуру и семантику кода. И имеет всего одно назначение - это очистка потока.

Новое решение

Это решение более сложно, но оно того стоит:) Будем использовать псевдоэлемент :after. HTML код тот, что что и в начале статьи.

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

Решение с помощью overflow: hidden

Есть ещё проще метод. Добавляем правило overflow: hidden родительскому блок, который содержит float элемент.

.parent {
    overflow: hidden;
    zoom: 1; /* for IE */}

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

Микро решение

Если Вам не нужна поддержка IE6-7:

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

Вот и все примудрости. Есть много способов решении данной проблемы. Какой использовать - можете уже решить сами. Я использую разные способы под различные задачи.

Если есть вопросы - пишите. Удачи!

 

Прочитано 1081 раз