CSS - Работа с плавающими элементами
Плавающий элемент - это блочный элемент, у которого установлено CSS свойство float
со значением left
или right
. Располагается плавающий элемент следующим образом: он открепляется от своего текущего места (текущее место - это место, которое занимал бы блочный элемент, если он был бы не плавающим) и располагается по вертикали (верхняя граница плавающего элемента выравнивается по верхней границе текущей строки) и горизонтали (в зависимости от значения свойства float
плавающий элемент будет прикрепляться насколько возможно к левому или правому краю родительского элемента). Остальное содержимое, расположенное после плавающего элемента в этом контейнере обтекает этот плавающий элемент с противоположной стороны. Место, которое он занимал бы, если бы не был плавающим, не закрепляется за ним, и его место будет занимать элементы контейнера, расположенные после плавающего элемента. Также необходимо учитывать то, что высота плавающего блока не влияет на высоту блока контейнера, в которую он помещён.
Например: высота контейнера, в который помещён только плавающий блок будет равна 0.

Рассмотрим расположение плавающих блоков на примере. Для начала создадим 3 блока с разным фоном и разместим их в контейнере, который имеет высоту 350px и внутренние отступы с каждой стороны (padding
) по 20px. По умолчанию блочные элементы будут занимать всю ширину контейнера, и располагаться один под другим.
<div style="height: 350px; padding: 20px;border: 1px solid black;">
<div style="height: 100px; border: 1px solid black; background: blue;"></div>
<div style="height:100px; border: 1px solid black; background: red;"></div>
<div style="height: 100px; border: 1px solid black; background: orange;"></div>
</div>

Теперь с помощью свойства float
изменим 2 блок на плавающий и установим ему ширину равную 120px. Задание ширины для плавающих блоков является обязательным условием. После изменения блочный элемент 3 стал обтекать плавающий блок с противоположной стороны.
<div style="height: 350px; padding: 20px;border: 1px solid black;">
<div style="height: 100px; border: 1px solid black; background: blue;"></div>
<div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div>
<div style="height: 100px; border: 1px solid black; background: orange;"></div>
</div>

Теперь изменим высоту блочного элемента 3 и заметим, что после обтекания плавающего элемента блочный элемент 3 выравнивается по левому краю.
<div style="height: 350px; padding: 20px;border: 1px solid black;">
<div style="height: 100px; border: 1px solid black; background: blue;"></div>
<div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div>
<div style="height: 200px; border: 1px solid black; background: orange;"></div>
</div>

Теперь и 1 блок сделаем плавающим, дополнительно установив ему ширину 120px и высоту 150px. 2 плавающий блок (красный) будет стремиться прикрепиться насколько возможно к левому краю родительского элемента, но 1 блок ему будет мешать, следовательно, он прикрепиться к правому краю 1 блока.
<div style="height: 350px; padding: 20px;border: 1px solid black;">
<div style="float: left; height: 150px; width:120px; border: 1px solid black; background: blue;"></div>
<div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div>
<div style="height: 200px; border: 1px solid black; background: orange;"></div>
</div>

Примечание: Когда плавающим элементам не будет хватать ширины контейнера, они будут перемещаться вниз.

Способы отмены обтекания
Плавающие блоки очень часто применяются при вёрстке веб-страниц. Однако бывают ситуации и довольно часто, когда необходимо отменить блоку обтекание с одной или с двух сторон. Существует несколько способов как это сделать:
- С помощью CSS свойства
clear
, которое имеет значениеleft
(отменяет обтекание с левого края элемента),right
(отменяет обтекание с правого края) илиboth
(отменяет обтекание элемента одновременно с левого и правого краёв). В зависимости от ситуации это свойство можно применить непосредственно к блоку или создать пустой блокdiv
со свойствомclear
и соответствующим значением. Например:<div style="clear:both"></div>
- этот блок не обтекает плавающий элемент с левого и правого краёв.HTML<div style="height: 350px; padding: 20px;border: 1px solid black;"> <div style="float: left; height: 150px; width:120px; border: 1px solid black; background: blue;"></div> <div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div> <div style="clear:left; height: 200px; border: 1px solid black; background: orange;"></div> </div>
- С помощью CSS свойства
overflow
со значениемauto
илиhidden
. Принцип заключается в том, что плавающие элементы помещаются в контейнерdiv
, которому добавляется свойствоoverflow
. Но будьте осторожны со свойствомoverflow
и просчитайте возможные размеры плавающих элементов.HTML<div style="height: 350px; padding: 20px;border: 1px solid black;"> <div style="overflow:hidden;"> <div style="float: left; height: 150px; width:120px; border: 1px solid black; background: blue;"></div> <div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div> </div> <div style="clear:left; height: 200px; border: 1px solid black; background: orange;"></div> </div>
- С помощью псевдоэлемента
:after
. Данный способ заключается в добавление невидимого блока, который отменяет обтекание.HTML<style type="text/css"> .clearfix:after { content : "."; <!-- Выводит точку --> visibility : hidden; <!-- прячем точку --> display : block; <!-- Элемент является блочным --> height : 0; <!-- Высота блока равна 0 --> clear : both; <!-- Отменяем обтекание --> } </style> ... <div style="height: 350px; padding: 20px;border: 1px solid black;"> <div class="clearfix;"> <div style="float: left; height: 150px; width:120px; border: 1px solid black; background: blue;"></div> <div style="float: left; height:100px; width:120px; border: 1px solid black; background: red;"></div> </div> <div style="clear:left; height: 200px; border: 1px solid black; background: orange;"></div> </div>
Изменение высоты контейнера, содержащего плавающий блок
Как мы уже отмечали выше то, что на высоту контейнера не оказывает ни какое влияние высота плавающих блоков. Давайте рассмотрим способы, с помощью которых мы заставим растянуться контейнер на высоту дочернего плавающего блока.- С помощью свойства
clear
. Для этого необходимо поместить пустой контейнер с этим свойством после плавающего блока.HTML<div style="border: 1px solid black; background: green;"> <div style="float: left; height: 100px; width:100px; border: 1px solid black; background: blue;"></div> <div style="clear:both;"></div> </div>
- С помощью свойства
overflow
. Для этого необходимо создать контейнер и поместить в него плавающие блоки. Затем добавить к контейнеру стиль со свойствомoverflow
, которому задать значениеhidden
илиauto
.HTML<div style="overflow:hidden; border: 1px solid black; background: green;"> <div style="float: left; height: 100px; width:100px; border: 1px solid black; background: blue;"></div> </div>