Плавающий блок и обтекание элемента (float, clear) в CSS

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

Рассмотрим пример HTML:

<div style="float:left;">
   Мышь
</div>
<div>
   Кот
</div>

Результат на странице браузера будет таким:

Мышь
Кот

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

Если в одном родительском контейнере будет несколько элементов с float, то они будут обтекать друг-друга по горизонтали. Если места будет не хватать, то они будут обтекать вертикально (будут располагаться ниже).

Запрет обтекания

Бывают случаи, когда необходимо полностью запретить обтекание элемента (одной или двух сторон. Для этого необходимо задать этому элементу свойство "clear" и значением для запрета: "right", "left", "both" (запрет на обтекание справа, слева и с двух сторон). Попробуем сделать полный запрет на обтекание первого контейнера из примера выше:

<div style="float:left;">
   Мышь
</div>
<div style="clear:both;">
   Кот
</div>

Результат будет такой:

Мышь
Кот

У второго контейнера появился полный запрет на обтекание элементами с обеих сторон "clear:both;". Поэтому он перешёл на следующую строчку и занял всю ширину, как обычно делают блочные элементы.

Списки с float элементами

Свойство float часто используется для создания списков в виде "плитки". Это используется, например, галерей с рядами озображений. Приведём пример, CSS код такого списка:

ul {
   max-width: 180px;
   list-style: none;
}
ul li {
   float: left;
   border: 3px solid #c0d2de;
   padding: 10px;
}

HTML код списка:

<ul>
   <li></li>
   <li></li>
   ...
   <li></li>
</ul>

В примере специально ограничим ширину родительского контейнера (max-width), чтобы показать как элементы списка обтекают друг-друга в несколько строк. В результате получим такой вид в браузере:

Существует большая проблема с float - это "выход" элементов за пределы родительского контейнера. Наглядно продемонстрируем это, добавив цветной контур к тегу <ul>:

Элементы, имеющие свойство float, вылезают за пределы родительского контейнера, через его нижнюю границу. Если после такого списка будет идти другой элемент, то на него будут наплывать все выпавшие из списка пункты. Продемонстрируем это, добавив контейнер <div> сразу после списка:

<ul>
   <li></li>
   <li></li>
   ...
   <li></li>
</ul>
<div>
   следующий блок
</div>

В браузере результат будет такой (выделим div контейнер зелёной рамкой для наглядности):

следующий блок

Следующий блок не только заполз на плавающие элементы, но и передвинул текст внутри себя, чтобы он не перекрывался. Чтобы решить эту проблему, используется несколько техник. К примеру, контейнеру из примера div можно задать свойство "clear:both;" тогда он опустится ниже всех элементов так, чтобы его не обтекали:

следующий блок

Второй способ - это вставить внутрь родительского блока, в самый конец такой контейнер:

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

Он растянет по вертикали родительский контейнер и все плавающие элементы окажутся бы внутри него. Но мы использовали в своём примере список <ul> и не можем поставить внутрь него контейнер, поэтому остаётся только третий способ - использовать CSS псевдолемент after. Для этого напишем такой CSS код:

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

Добавим класс в html код:

<ul class="clearfix">
   <li></li>
   <li></li>
   ...
   <li></li>
</ul>
<div>
   следующий блок
</div>

Класс "clearfix" будет создавать псевдоэлемент после списка <ul> По своей функции он аналогичен контейнеру из второго способа. Результат будет именно тот, который мы ждём:

следующий блок

Каждый блок на своём месте, есть плавающие элементы и есть контейнер снизу.