Float в CSS используется для размещения элемента слева или справа от его контейнера, позволяя остальному содержимому обтекать его.
Значения Float
float: left;— элемент плывет влево.float: right;— элемент плывет вправо.float: none;— по умолчанию элемент не плавает.float: inherit;— элемент наследует значение float от родителя.
Пример
Блок 1
Блок 2
Обратите внимание, как эти блоки плавают по сторонам, а текст обтекает их. Float часто используется для макетов, изображений и сайдбаров.
Очистка Float
После использования плавающих элементов контейнер может "сжиматься". Чтобы это исправить, используйте clear:
div.clearfix::after {
content: "";
display: table;
clear: both;
}Задание
Создайте макет с двумя плавающими блоками: один слева, другой справа, и добавьте текст, который обтекает их.