Загрузка...

Float и Clear в CSS

Z-index укладывал перекрывающиеся слои. float и clear решают другую классическую задачу: дать тексту прижаться к боку картинки или врезки и решить, когда следующий блок должен упасть под эти float. Освойте паттерн обтекания — сетки страницы оставьте Flexbox и Grid.

Набор инструментов float и clear

📊 Float и clear одним взглядом

Инструмент	Повседневная роль
`float: left`	Тянет блок влево; следующий контент может обтекать справа
`float: right`	Тянет блок вправо; следующий контент может обтекать слева
`float: none`	По умолчанию — без поведения float
`clear: left`	Следующий блок отказывается садиться рядом с левыми float
`clear: right`	Следующий блок отказывается садиться рядом с правыми float
`clear: both`	Следующий блок падает под float с любой стороны
Clearfix	Родитель растёт, чтобы вместить плавающих детей (напр. `overflow` или `display: flow-root`)

Плавающие блоки особым образом выходят из обычного потока: соседи могут обтекать сбоку, а родитель может схлопнуться до нулевой высоты, если содержит только float. Именно из‑за этого схлопывания нужен clearfix.

Сделайте float картинки — история обтекает

Потяните фигуру влево и дайте абзацам течь рядом. Задайте изображению ширину, чтобы обтекание выглядело нарочно, а не случайно.

Картинка float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Врезка — float в другую сторону

Короткий совет или цитата может сесть справа, пока основной текст обтекает слева. Держите отступы, чтобы текст не «целовал» блок.

Врезка float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

clear — перестать обнимать float

Когда заголовок, подвал или следующий раздел должны начаться с новой строки под float, используйте clear. clear: both — повседневное «упади под всё плавающее».

clear both после float

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Схлопнувшимся родителям нужен clearfix

Если родитель только оборачивает плавающих детей, высота может схлопнуться, а фоны/рамки выглядят сломанными. Спокойное решение: overflow: auto (или hidden) на родителе — или современный display: flow-root.

Clearfix через overflow

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — ясный containing block

display: flow-root создаёт новый block formatting context, чтобы родитель содержал свои float без побочных эффектов overflow.

Clearfix через flow-root

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Спокойная привычка с float

Используйте float для текста вокруг медиа и мелких приёмов обтекания. Предпочитайте Flexbox или Grid для навигации, колонок страницы и сеток карточек. Помните: position размещает; z-index наслаивает; float обтекает.

Паттерн медиа плюс текст

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Попробуйте сами

Сделайте float картинки влево в статье с абзацами и подстройте отступы.
Сделайте float подсказки вправо и обтекайте основной текст рядом.
Добавьте clear: both подвалу, который поднимался рядом с float.
Почините схлопнувшегося родителя через overflow: auto или display: flow-root.
Напишите одно предложение: когда выберете Flex вместо float?

Частые ошибки

Собирать целые макеты страницы на float вместо Flex/Grid
Забывать clear, и подвалы ползут рядом с картинками
Игнорировать схлопнувшихся родителей вокруг плавающих детей
Относиться к float как к position или z-index
Ставить clear только на плавающий блок, когда имелся в виду следующий

Итог

float отводит блок в сторону, чтобы следующий контент мог обтекать
clear заставляет последующие блоки падать под float
Родители «только float» могут схлопываться — clearfix через overflow или flow-root
Оставьте float для обтекания; Flex/Grid — для структуры страницы
Размещение и наслоение остаются своими инструментами (position, z-index)

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык