clear
CSS свойство clear указывает с какой стороны текущего элемента не допускаются плавающие элементы (плавающими являются элементы, у которых CSS свойство float имеет значение right или left ).
Если для элемента установлен запрет обтекания плавающих элементов с обеих сторон, то он будет смещён вниз — под плавающий элемент. Обратите внимание, что элемент будет смещён под плавающий элемент только в том случае, если плавающий элемент находится с той же стороны, с которой он запрещён у текущего элемента.
Рассмотрим на небольшом примере как работает свойство clear . На изображении, расположенном ниже, видно, что плавающий элемент с идентификатором sidebar частично перекрывает два блочных элемента.
Нам нужно сделать так, чтобы нижний блочный элемент не перекрывался плавающим элементом, для этого воспользуемся свойством clear для <div> с идентификатором footer и установим ему значение right . Таким образом мы указали, что с правой стороны элемента не может быть никакого плавающего содержимого, в результате чего он смещается немного вниз и располагается под плавающим элементом:
clear
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
[window.]document.getElementById(" elementID ").style.clear
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear , соприкасающиеся с плавающими элементами (у которых задано свойство float ) могут исчезать.
В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?
Свойство clear со значениями l eft, right, both действительно очищает поток в отличие от overflow со значеним hidden , которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.
В самом начале своего пути верстальщика многие из нас, наверно, ожидали следующее отобржание при следующей конструкции: 
Ожидания не оправдывались и мы видели примерно следующее: 
Тогда городились конструкции вида <div ></div> , кстати бессмысленные при существовании <br clear=»all»/> .
Потом приходили методы самоочистки, всё с тем же свойством clear. Ещё к ним относят overflow со значением hidden. В описании данного свойства в спецификации ничего связанного с обтеканием нет, зато в описании «нормального потока» есть абзац с парой строк, связанных с нашим « overflow:hidden »:
Таким образом всё колдовство, просходящее внутри элемента, локализуется и больше не выходит за его пределы, а это означает, что можем получить то, что ожидали получить (см. выше), как если бы мы поместили весь контент нашего элемента в отдельный iframe . Но кроме этого мы получаем кое-что ещё.
CSS спецификация требует «поместить верхний край границы ниже нижнего внешнего края любых попадавшихся ранее в документе элементов со свойством float:left или float:right или и с тем и другим» при применении к элементу свойства clear с значениями соотвественно left, right и both .
Иными словами если у вас есть высокий сайдбар слева, и справа его обтекает контент и в контенте попадается элемент со свойством clear:left , то этот элемент окажется ниже сайдбара, что не очень нужно, особенно если сайдбар очень высокий.
Я считаю, что свойство overflow гараздо удобней для управления потоком, чем clear (см. рис. ниже) и предполагаю, что оно способствует улучшению производительности так же как абсолютное позиционирование. 
Видимо свойство hasLayout в IE работает точно также — создаёт отдельный контекст форматирования для выбранного элемента.