1. Использование хака Clearfix: предполагает добавление класса Clearfix в родительский контейнер плавающих элементов. Класс Clearfix содержит правила CSS, которые очищают плавающие элементы и предотвращают схлопывание родительского контейнера.

Пример:

«»;
отображение: таблица;
очистка: оба;

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

Пример:

.parent-container {
  overflow: auto;
}

3. Использование очищающего элемента: добавление пустого элемента div со свойством clear, для которого установлено значение bothпосле того, как плавающие элементы смогут очистить плавающие элементы.

Пример:

<div class="parent-container">
  <div class="floated-element">...</div>
  <div class="floated-element">...</div>
  <div ></div>
</div>

4. Использование фреймворков CSS: фреймворки CSS, такие как Bootstrap, предоставляют служебные классы, такие как clearfix, которые можно добавить в родительский контейнер для очистки чисел с плавающей запятой.

Пример (Bootstrap):

<div class="parent-container clearfix">
  <div class="floated-element">...</div>
  <div class="floated-element">...</div>
</div>