clearСвойство напрямую связано с поплавками. Если элемент может поместиться по горизонтали в пространстве рядом с другим плавающим элементом, так и будет. Если вы не примените clearк этому элементу в том же направлении, что и float. Затем элемент переместится вниз под плавающий элемент.
Вот простой пример макета, созданного с помощью поплавков, который может быть проблематичным для нижнего колонтитула:
Но после очистки элемента нижнего колонтитула макет встанет на свое место:
#footer ( clear: both; )
В этом случае ясно: оба; был использован, чтобы гарантировать, что нижний колонтитул очищает прошлые элементы, которые перемещаются в любом направлении. Но вы также можете очистить или, leftи rightв этом случае элемент будет перемещаться ниже элементов, которые перемещаются в этом направлении, но не в другом.
Обычный способ очистить плавающие объекты - это применить псевдоэлемент к элементу контейнера, который очищает плавающий объект. Узнайте больше об этом здесь.
Поддержка браузера
clearСвойство работает во всех браузерах.