CSS свойства float и clear - как сделать обтекание блока и очистку обтекания
При размещении элементов на странице часто бывает необходимость сделать обтекание одного блока другим. Для этого в CSS есть специальное свойство – float. Начинающему разработчику обычно бывает непонятно как работает это свойство, но с практикой это исправляется. Важно понимать, что после применения свойства бывает также необходимо выполнять очистку обтекания, чтобы другие элементы не обтекались.
Немного предыстории. Раньше, чтобы разместить один элемент слева или справа другого, в основном использовались таблицы. Но такой подход устарел, верстка стала делаться при помощи div блоков и поэтому для них придумали новое свойство – float.
Какие значения имеет данное свойство? Их немного:
- left - является ключевым словом, указывающим, что элемент должен плавать в левой части его содержащего блока;
- right - является ключевым словом, указывающим, что элемент должен плавать с правой стороны его содержащего блока;
- none - является ключевым словом, указывающим, что элемент не должен плавать;
- inherit – наследуется родительское значение.
Как было сказано выше, после применения свойства float может понадобиться отменить его действие – сделать очистку обтекания. Это можно сделать при помощи свойства clear, оно создано как раз для этого.
Какие значения можно указать у clear? Посмотрим ниже:
- left - указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с левой стороны;
- right - указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с правой стороны;
- both - указывает, что элемент перемещается вниз, будет очищено обтекание как с левой стороны, так и с правой;
- none – не отменяет обтекания, может понадобиться в некоторых случаях;
- inline-start - указывает, что элемент перемещается вниз для очистки обтекания в начале содержащего его блока, то есть будет очищено левое обтекание для текста с направлением текста слева-направо и правое обтекание для текстов с направлением текста справа-налево;
- inline-end – аналогично предыдущему значению, только наоборот.
Таким образом, мы рассмотрели, как выполнить обтекание элемента слева или справа, а также как сделать очистку обтекания при помощи специального свойства.
Последние статьи
- 04.06.20 Как самому перенести сайт на другой хостинг или тариф удаленно, без скачивания на компьютер
- 03.06.20 Какой тариф выбрать и на сколько заказывать хостинг чтобы сэкономить
- 02.06.20 Какой тип хостинга выбрать – обычный виртуальный, хостинг для CMS, VPS, VDS или выделенный сервер
- 01.06.20 Как сделать счетчик просмотров материала на сайте
- 10.05.20 Как в программировании быстро придумать правильные названия переменных, функций, классов, свойств, методов и т.д.