Float CSS: что это такое и как работают адаптивные блоки Div в CSS?

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

 

Свойство float

Суть float заключается в том, чтобы «прижать» определенный компонент страницы влево или вправо, «вырвав» его из общего потока элементов. Данное свойство дает возможность float-элементу быть обтекаемым другим контентом. Если провести аналогию, то это как в печатной газете, когда есть столбец, в столбце есть некое изображение, которое «обтекает» печатный текст. То же происходит и с элементами HTML на странице, если к ним применить свойство float.

 

Значения свойства float

Свойство float может принять 4 значения:

1. Left. Компонент будет прижат влево, а контент его будет обтекать справа.
2. Right. Компонент будет прижат вправо, а контент его будет обтекать слева.
3. None. Компонент не выравнивается, это значение по умолчанию.
4. Inherit. Значение компонента наследуется от «родителя».

Самыми популярными значениями являются «влево» и «вправо». Пример синтаксиса:

#floatelement {

float: right;

}

 

Свойство float не требует применения каких-то дополнительных свойств, однако, чтобы оно работало правильно, нужно соблюдать некоторые рекомендации. Например, float-элементу нужно задавать ширину, чтобы само свойство работало правильно и чтобы избежать проблем в старых версиях браузеров. Например:

#floatelement {

float: right;

width: 265px;

}

 

Проблемы со свойством float

Одной из проблем является неправильное обтекание или когда вообще не нужно обтекание элемента. В этих случаях может помочь свойство clear, которое способно «убрать» обтекание слева, справа или слева и справа разом. Clear может приобретать следующие значения:

1. Left. Будет отменять обтекание слева.
2. Righ. Будет отменять обтекание справа.
3. Both. Будет отменять обтекание слева и справа.
4. None. Не будет отменять обтекание, это обозначение по умолчанию.

Второй по значимости проблемой является «выпадание» float-элемента из родительского блока. Это происходит потому, что float-элемент никак не воздействует на родительский элемент. Поэтому если мы его делаем больше размера «родителя», то он просто «выйдет» из его размеров.

Есть несколько вариантов решить эту проблему:

1. Сделать родительский контейнер тоже float. Это самый простой способ, но в некоторых случаях он может внести нежелательные возможности общего макета.
2. Добавить дополнительную разметку. Это тоже простой способ. Все, что нужно сделать, — это в контейнер родителя в нижней части добавить другой контейнер и «опустошить» его. Минус этого метода — он добавляет ненужный код вашей разметке, поэтому если смотреть со стороны чистоты кода, то не стоит его применять.
3. Использовать свойство overflow: hidden или auto для родительского контейнера. Это самый эффективный и самый лучший способ разрешить проблему «выпадания».

 

Заключение

Свойство float — это довольно интересный инструмент в верстке макетов. Очень часто оно применяется, когда нужно сделать горизонтальное меню или галерею фотографий в неупорядоченном виде.

Свойство float позволяет сделать табличное расположение элементов удобным и красивым, и в ряде случаев оно просто незаменимо. Не бойтесь экспериментировать, используя это свойство.