🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Как работают плавающие элементы (floats)?
float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).
Основные значения float
Это текст, который будет обтекать картинку.
.float-img {
float: left;
margin-right: 10px;
}
🟠Почему родитель "схлопывается" при `float`?
Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.
Текст обтекает картинку.
.container {
background: lightgray;
}
.float-img {
float: left;
}
Решение 1: overflow: hidden;
.container {
overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}
Решение 2: clearfix (старый способ)
.container::after {
content: "";
display: block;
clear: both;
}
🟠Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется clear.
Этот текст обтекает картинку.
Этот текст пойдёт на новую строку.
.float-img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
🚩Почему `float` устарел и что использовать вместо него?
Раньше float использовали для создания колонок и сеток, но сегодня его заменили:
Flexbox (display: flex;) – лучше для адаптивных макетов.
CSS Grid (display: grid;) – мощный инструмент для сложных сеток.
.container {
display: flex;
align-items: center;
}
Ставь 👍 и забирай 📚 Базу знаний