Зачем нужна следующая конструкция в CSS

[newенький]

Наткнулся на конструкцию:

.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear {display: inline-block;}
.clear {display: block;}

Зачем в ней ставится "." после блока clear, и зачем переопределяются свойства display, сначала одно, потом другое?

Заранее спасибо!

[Tokolist]

http://designformasters.info/posts/clearing-float/

Лучше использовать:

overflow: hidden;
zoom: 1;

[Justnewone]

Все это конструкции, заставляющие родителя чувствовать высоты своих флоат-потомков.

Лучше использовать:

overflow: hidden;
zoom: 1;

Согласен, лучше, но, правда, надо вставлять внутрь див с маргинами, потому как теперь дочерние маргины схлопываться перестанут, ну, если конечно есть такая нужда.

[Игорь Ермаков]

У меня вопрос, а к чему вам zoom.

Никогда не понимал для чего это свойство, оно ведь только на ие.

[SelenIT]

Именно что для IE. Для включения hasLayout c минимальными последствиями для окружающих.

Вариант с overflow:hidden приятен своей простотой, но у него есть свои ограничения (одно из них — печать — упомянуто в последнем комменте в вышеприведенной ссылке, другое — невозможность использовать в таком блоке динамических элементов типа "псевдоокон" а-ля LightBox). Вариант с псевдоэлементом, пожалуй, чуток поуниверсальнее. Но hasLayout для IE нужен в любом случае.

Edited July 27, 2009 by SelenIT