Web

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

Lorem ipsum dolor

Свойство 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 позволяет сделать табличное расположение элементов удобным и красивым, и в ряде случаев оно просто незаменимо. Не бойтесь экспериментировать, используя это свойство.

Схожие статьи

Лучшие бесплатные платформы для создания сайтов без особых навыков
Web

Лучшие бесплатные платформы для создания сайтов без особых навыков

Web

Потеря PHP сеанса после перенаправления

Web

Как сохранить изображение PNG на стороне сервера из URI данных base64

Современный веб-дизайн. Самые яркие примеры стильных сайтов
Web

Современный веб-дизайн. Самые яркие примеры стильных сайтов