Понимание роли «clear:both» в CSS

Когда на веб-странице есть элементы, перемещаемые влево или вправо, это может заставляют последующие элементы обтекать их. Чтобы предотвратить это, CSS предоставляет свойство «clear», которое можно установить для определенной стороны (слева, справа) или для «обеих».

Каково использование «clear:both» ?

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

Как работает «clear:both»?

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

Пример использования

Рассмотрите следующий HTML-код:

В этом примере элемент div «Left float» перемещается влево, в результате чего текст «Это абзац» обтекает его. Затем элемент div «Очистить оба» используется для очистки левой и правой сторон, позволяя тексту «Это новый абзац» появиться под ним на новой строке.
Заключение 
Установив для элемента «clear:both», вы можете гарантировать, что он начинается с новой строки под любыми ранее плавающими элементами, обеспечивая согласованный и контролируемый макет.