текст, который задаст высоту родителю
В итоге получаем:
ожидалось, что следующий блок, будет расположен под блоком-родителем, высота которого будет равна высоте самого высокого дочернего блока (в данном примере высоте плавающего блока).
В реальности, следующий блок (в большинстве браузеров) действительно расположен под блоком-родителем, но высота родителя равна высоте статического (неплавающего) содержимого
Старое решение
Очищаем поток, используя дополнительный элемент, помещенный в конце блока родителя со свойством или атрибутом clear (
):HTML
текст, который задаст высоту родителю
CSS
[php]
.clear {
clear: both;
overflow: hidden;
}
[/php]
Недостаток данного способа — появляется никому не нужный, портящий структурность и семантику кода элемент. Зачастую с единственным назначением — это очистить поток.
Новое решение
Очищаем поток, используя псевдоэлемент :after
html
текст, который задаст высоту родителю
CSS
[php]
.parent:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
[/php]
