Контейнер с плавающими элементами не покроет их полностью

Question

У меня есть основной контейнер с плавающими элементами div. Он останавливается перед ними и не достигает их дна? Какой лучший кросс-браузерный способ исправить это?

(рассматриваемая страница - http://lauradifazio.altervista.org/cms/, а основным контейнером является красный div, который останавливается под голубым + оранжевым, потому что тот не всплывает)

Answer 1

Достигнуть этого результата можно в основном двумя способами: вам нужно либо:

• плавать слева от основного контейнера (это решает вашу проблему, но возникает больше, так как центрированный макет разбивается)1004 *
• поместите пустой div со стилем clear: left перед закрывающим тегом основного контейнера

Так как эта концепция лежит в основе дизайна css, я настоятельно рекомендую вам иметьвзгляните на эту книгу: Джанлука Трояни - CSS: guida complete она охватывает все аспекты компоновки CSS и действительно может изменить вашу жизнь ... она изменила мою!:)

Buona fortuna

Answer 2

#container { overflow:hidden; zoom:1; }

Чтобы очистить плавающие объекты, используя hasLayout для IE, заблокировать контекст форматирования для других.

Это должен быть наиболее часто задаваемый вопрос CSS на SO :)