Почему для li со стилем float: левый браузер оценивает высоту элемента ul в 0?

#html #css

#HTML #css

Вопрос:

В коде, представленном в gist:https://gist.github.com/1341600 Я пытаюсь использовать элементы ul / li для группировки некоторых элементов формы поиска (вместо таблицы). При проверке выходных данных в браузере (Chrome 15 / FF 7 с firebug) элемент ul, похоже, имеет высоту 0, а элементы li отображаются за его пределами. Когда я комментирую

float: left; инструкция из ul.search-inputs li объявления CSS, после чего высота элемента ul отображается правильно.

Может ли кто-нибудь указать мне на решение, чтобы правильно видеть высоту элемента ul?

Ответ №1:

Это не ошибка, это особенность!

Контейнер плавающего элемента уменьшен, так что другие встроенные элементы будут обтекать его (согласно спецификациям).

3 варианта в этом случае заключаются в:

Используйте известное значение высоты и примените его к ul элементу.
```
 ul { height: 150px; }
  
```
Используйте overflow свойство для ul элемента, чтобы заставить браузер пересчитать его высоту вместе со всеми элементами внутри него.
```
 ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
  
```
Перемещает сам контейнер. Поскольку нет необходимости уменьшать его, если он плавает сам по себе.
```
 ul { float: left; }
  
```

1. почему это особенность, а не ошибка? почему родительский элемент должен быть shruken?

2. @user590849: Это потому, что плавающие элементы «удалены из потока документа», что означает, что контейнер с только плавающими элементами не имеет элементов в потоке документов, и, следовательно, высота равна 0.

Ответ №2:

Добавьте следующий css:

 ul.search-inputs {
    overflow: hidden;
}

Также смотрите этот jsfiddle.

1. Это работает. Спасибо за ответ. Не могли бы вы, пожалуйста, объяснить мне, зачем браузеру UL нужна эта настройка стиля?

2. Вы должны остановить плавающий. Вы можете остановить это, добавив последний элемент с помощью css clear: both или вы используете overflow: hidden в родительском элементе (потому что веб-разработчик хочет иметь наименьшее количество элементов dom).

Ответ №3:

Это поведение соответствует спецификации W3C. Это сделано намеренно, но в первый раз может немного сбить с толку. Контейнер с плавающим содержимым должен быть уменьшен, чтобы позволить другому встроенному содержимому обтекать его собственное.

Например. если у вас есть

 <p>
    <img class="float" height="1000">
     sometext
</p> 
<p>
     sometext
</p>

вероятно, вы ожидали бы, что какой-то текст из второго изображения потока p.

Если вам нужен контейнер с шириной и высотой, вы можете либо указать их вручную, либо применить css overflow:auto или float:left к контейнеру;