css: плавающий div влияет на содержимое не плавающего div

Question

Я только что закончил прохождение google css: http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/

После экспериментов с файлами примеров (file: css-walkthrough.html) я обнаружил странное поведение, которое я не смог объяснить.

У меня есть три div в контейнере div:

<div id="wd-c">

  <div id="wd-1"><span>1</span></div>

  <div id="wd-2"><span>2</span></div>

  <div id="wd-3"><span>3</span></div>

</div>

У нас есть следующий css, который рендерится, как и ожидалось: все 3 div взяты «из потока» и отображеныв одну строку.Пределы содержимого находятся внутри div.

#wd-c div {
    height: 150px;
    border: 1px solid #222;
    font-size: 150%;
    font-weight: bold;
    opacity: .7;
}

#wd-c div { width: 150px; }
#wd-c #wd-1 { width: 50px; } /*for clarity*/      

#wd-1 { float: left }
#wd-2 { float: left }
#wd-3 { float: left }

Однако, когда я раскомментирую:

/*#wd-3 { float: left }*/

div # wd-1 и # wd-2 по-прежнему отображаются вне потока', # wd-3 отображается как блочный элемент, перекрывая другие 2.

Странно то, что диапазон содержимого с символом 3 отображается ниже всех элементов div и больше не находится внутри # wd-3.

Похоже, что содержимое # wd-3 зависит от плавающих элементов div, что, очевидно, неправильно.Например, когда я изменяю ширину # wd-3 на

#wd-c #wd-3 { width: 220px; }

, персонаж рендерится внутри div, рядом с перекрывающимся плавающим div # wd-2 .. у вас есть какое-либо объяснение?

Answer 1

Это вполне логично.float не извлекает соответствующий элемент из потока документов, как position:absolute.

Обычно элемент "уважает" соседние плавающие элементы и пытается соответственно отобразить его содержимое.Теперь, удалив float на вашем третьем div, он будет нарисован ниже плавающих div.Тем не менее, он пытается отобразить содержимое в следующем месте, не вмешиваясь в содержимое плавающих элементов div.

Поскольку вы объявили фиксированную ширину и высоту, третьему элементу div нет места для отображения содержимого без «столкновения»."с плавающими div.Вот почему внутренний span -элемент помещается ниже плавающих элементов div, где следующее свободное место для этого элемента будет.

Надеюсь, это немного объяснило механику.Попробуйте поэкспериментировать с высотой и шириной.(Комментируя их), чтобы увидеть различия.

Answer 2

Попробуйте загрузить пример еще раз, на моем компьютере 3 остается внутри #wd-3 div, когда я его плаваю.

Или, если вы хотите, чтобы #wd-3 div оставался ограничителем дляэлемент родительского блока, используйте overflow:hidden на #wd-c div.