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>

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

Теперь и 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>

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

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

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

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

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

  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>
    
    Отмена обтекания с помощью свойства clear
  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>
    
    Отмена обтекания с помощью свойства overflow
  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>
    
    Отмена обтекания с помощью псевдоэлемента :after

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

Как мы уже отмечали выше то, что на высоту контейнера не оказывает ни какое влияние высота плавающих блоков. Давайте рассмотрим способы, с помощью которых мы заставим растянуться контейнер на высоту дочернего плавающего блока.
  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>
    
    Изменение высоты контейнера с помощью свойства overflow


   HTML и CSS 1    2733 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.