Фон не виден из-за позиционирования

Question

Цвет фона списка <ol> отображается неправильно.Эта проблема началась после того, как я переместил метку влево и ввел вправо.Как это исправить.Ожидаемый результат:

Вот мой результат: http://fiddle.jshell.net/WZ3nM/1/

Аналогично у меня проблема с div .wrapperТень должна быть намного ниже содержимого, а под <div class=.col-2>.

должен быть белый цвет фона.

Answer 1

http://fiddle.jshell.net/WZ3nM/5/

Всякий раз, когда вы плаваете, вы должны очистить их в конце, чтобы он мог правильно рассчитать высоту.

Answer 2

Вам нужно очистить поплавок, прежде чем закрыть <ol>

Проверьте это здесь .

Answer 3

Как уже предлагали другие, вы можете очистить плавающий контент - хотя это добавит еще один элемент. Вы также можете добавить

li{overflow:auto;}

, что предотвратит свертывание списка. В IE6 вам также понадобится правило

li{height:1px;}

http://fiddle.jshell.net/WZ3nM/9/. Этот метод не требует очищающего элемента.

Answer 4

Я изменил ваш код и добавил третий

со следующим стилем:

clear:both;

Ваш поплавок извлекал элементы из потока документов, и этот цвет фона не знал, где заканчиваться.

Надеюсь, это поможет.