Вернуться




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



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




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





Какой хостинг выбрать для сайта

Какой хостинг выбрать для сайта

Для беспроблемного функционирования сайта на просторах интернета необходимо ...

15 Февраля 2021    Web

Как и на чём лучше писать сайты?

Как и на чём лучше писать сайты?

Каждый начинающий сайтостроитель мечтает создать свой уникальный сайт на ко ...

21 Февраля 2021    Web

Ищем качественный и недорогой хостинг? Тогда вам сюда

Ищем качественный и недорогой хостинг? Тогда вам сюда

Рано или поздно всем вебмастерам приходится искать хостинг для своего проек ...

21 Февраля 2021    Web



Напишем