Замена clear:both

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

1. Использование лишнего пустого контейнера, что добавляет лишний вес странице и противоречит принципам семантической верстки.
2. Неоднозначное восприятие браузером IE

Если на первый недостаток можно закрыть глаза, то вот второй недостаток добавляет проблемы при создании кроссбраузерного сайта. К сожалению браузер IE и в данном случае не работает как все браузеры, из-за чего невсегда можно использовать пустой контейнер с clear:both, часто приходится использовать:<br class="clear" /> , а иногда даже это не дает возможности получить одинаковое отображение в разных браузерах, так как часто появляются отступы после этой конструкции.

Эта проблема является очень актуальной, так как в случае с использованием cms не возможно автоматизировать завершение обтекания элемента.

Не так давно появился новый и более правильный способ завершить обтекание элемента. Явным преймуществом над традиционным методом является то, что является недостатками clear:both.

Хоть и используется лишний контейнер, но он не пустой и отступы после него не добавляются, что помогает добится кроссбраузерности сайта.