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>

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

Способы отмены обтекания

Плавающие блоки очень часто применяются при вёрстке веб-страниц. Однако бывают ситуации и довольно часто, когда необходимо отменить блоку обтекание с одной или с двух сторон. Существует несколько способов как это сделать:

1. С помощью CSS свойства clear, которое имеет значение left (отменяет обтекание с левого края элемента), right (отменяет обтекание с правого края) или both (отменяет обтекание элемента одновременно с левого и правого краёв). В зависимости от ситуации это свойство можно применить непосредственно к блоку или создать пустой блок div со свойством clear и соответствующим значением. Например: <div style="clear:both"></div> - этот блок не обтекает плавающий элемент с левого и правого краёв.

   <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>
   

   
2. С помощью CSS свойства overflow со значением auto или hidden. Принцип заключается в том, что плавающие элементы помещаются в контейнер div, которому добавляется свойство overflow. Но будьте осторожны со свойством overflow и просчитайте возможные размеры плавающих элементов.

   <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>
   

   
3. С помощью псевдоэлемента :after. Данный способ заключается в добавление невидимого блока, который отменяет обтекание.

   <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>
   

   

Изменение высоты контейнера, содержащего плавающий блок

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

1. С помощью свойства clear. Для этого необходимо поместить пустой контейнер с этим свойством после плавающего блока.

   <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>
   

2. С помощью свойства overflow. Для этого необходимо создать контейнер и поместить в него плавающие блоки. Затем добавить к контейнеру стиль со свойством overflow, которому задать значение hidden или auto.

   <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>