Метод Clearfix:

«»;
отобразить: таблица;
очистить: оба;

Этот метод использует псевдоэлемент (::after) для очистки чисел с плавающей запятой. Он создает пустой элемент после плавающих элементов и применяет к нему свойство clear: Both;.

Метод переполнения:

.container {
 overflow: auto;
}

Применяя свойство overflow: auto;к содержащему элементу, вы можете очистить элементы с плавающей запятой внутри него. Этот метод запускает новый контекст форматирования блока, в результате чего контейнер расширяется и содержит плавающие элементы.

Использование класса Clearfix:

.clearfix {
 clear: both;
}

Вы можете создать класс CSS под названием «clearfix» и применить его к элементу контейнера, которому необходимо очистить числа с плавающей запятой. Этот класс устанавливает свойство clear: Both;, которое очищает все числа с плавающей запятой перед элементом.

Метод Flexbox (для современных браузеров):

.container {
 display: flex;
 flex-wrap: wrap;
}

Используя flexbox, вы можете создать контейнер со свойством display: flex;и свойством flex-wrap: Wrap;. Это позволяет контейнеру регулировать свою высоту, чтобы вместить плавающие элементы.

Метод сетки (для современных браузеров):

.container {
 display: grid;
}

Используя сетку CSS, вы можете установить свойство display:grid;для элемента контейнера. Этот метод автоматически очищает поплавки и соответствующим образом регулирует высоту контейнера.