Что нарушает поток HTML в CSS?

Question

У меня возникли некоторые проблемы при попытке разместить несколько div в макете моего сайта. Все они связаны с размером div. Я использую инструменты разработчика Chrome для проверки div s, и когда я нащупываю некоторые дивы, это просто 1px-high , но у него есть содержимое внутри, а его содержимое имеет некоторую высоту. Разве он не должен иметь хотя бы такую ​​же высоту содержимого?

Я не знаю, правильно ли я объяснил, поэтому выкладываю несколько изображений. Я использую Blueprint CSS Framework , и это происходит, когда я использую class="span-XX", а внутри него я не использую ни class

Вот некоторые изображения (нажмите, чтобы увеличить)

Родитель div

div с проблемой (без высоты)

ребенок div

Родитель div имеет class="span-XX", div с проблемой имеет #search это это

Я подозреваю, что это некоторая проблема с плавающей точкой или позиционированием в css, но я не знаю, что это такое и как с этим бороться. У меня также есть список, содержащий социальные сети в верхней части сайта, у которых ul есть такая же проблема.

Answer 1

Для вашего дочернего элемента div установлено свойство float, поэтому родительский элемент div не будет расширяться по высоте, чтобы содержать его. Чтобы получить ожидаемое поведение, установите overflow: hidden в родительском div.

Answer 2

Если у вас есть поплавки внутри, вам нужно очистить их. Примените overflow:hidden; zoom:1; к родителю, содержащему числа с плавающей точкой, и он должен разрешить его.

Если у вас отрицательные поля / позиция + относительное и отрицательное смещение и вы не можете использовать скрытое переполнение, используйте clearfix ... http://work.arounds.org/clearing-floats/