Какие методы запрета обтекания (clearing) ты знаешь и в каких ситуациях они применяются?

Методы запрета обтекания:

• clear: left; — запрещает обтекание слева. Применяется, когда элемент не должен располагаться рядом с обтекаемыми слева элементами.
• clear: right; — запрещает обтекание справа. Применяется, когда элемент не должен располагаться рядом с обтекаемыми справа элементами.
• clear: both; — запрещает обтекание с обеих сторон. Применяется, когда элемент не должен располагаться рядом с любыми обтекаемыми элементами. Это наиболее распространенный вариант.
• clear: none; (значение по умолчанию) — разрешает обтекание.

Применение:

• Для предотвращения "схлопывания" родительского контейнера: Если все дочерние элементы родителя обтекают друг друга (имеют float), родительский контейнер теряет свою высоту и схлопывается. Добавление элемента с clear: both; после обтекающих элементов внутри родителя или использование псевдоэлемента ::after с clear: both; решает эту проблему.
• Для правильного расположения элементов после обтекающих: Если обычные (не обтекающие) элементы должны располагаться ниже обтекающих, а не рядом с ними.
• Для создания "рядков" или "строк" в обтекающих макетах: Когда элементы с float должны выстраиваться в несколько рядов, clear используется для начала нового ряда.

Пример использования псевдоэлемента ::after для очистки:

.clearfix::after {
  content: ""; /* Важно для отображения псевдоэлемента */
  display: table; /* Или block */
  clear: both; /* Основное свойство для очистки */
}

Этот класс clearfix затем применяется к родительскому элементу, содержащему обтекаемые дочерние элементы.