CSS - Работа с плавающими элементами

11.09.2021

15.6K

Содержание:

Комментарии

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

Например: высота контейнера, в который помещён только плавающий блок будет равна 0.

Высота контейнера, в который помещён плавающий блок

Рассмотрим расположение плавающих блоков на примере. Для начала создадим 3 блока с разным фоном и разместим их в контейнере, который имеет высоту 350px и внутренние отступы с каждой стороны (padding) по 20px. По умолчанию блочные элементы будут занимать всю ширину контейнера, и располагаться один под другим.

HTML

<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 стал обтекать плавающий блок с противоположной стороны.

HTML

<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 выравнивается по левому краю.

HTML

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

Расположение блоков при увеличении высоты 3 блока

Теперь и 1 блок сделаем плавающим, дополнительно установив ему ширину 120px и высоту 150px. 2 плавающий блок (красный) будет стремиться прикрепиться насколько возможно к левому краю родительского элемента, но 1 блок ему будет мешать, следовательно, он прикрепиться к правому краю 1 блока.

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="height: 200px; border: 1px solid black; background: orange;"></div>
</div>

Расположение блоков, 2 из которых являются плавающими

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

Расположение плавающих элементов при уменьшении ширины контейнера

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

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

С помощью 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>

Отмена обтекания с помощью псевдоэлемента :after

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

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

С помощью свойства 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>
```

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

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

Комментарии: 0