Флоаты

[DrStrangeLove]

В чём разница в этих двух примерах:

http://jsfiddle.net/CX6HZ/

http://jsfiddle.net/L83zb/

И там, и там один слой зафлоченный - а другой нет..

другой слой и там, и там -без float и блочные.

Но почему в одном примере другой слой встаёт ниже, а в другом стоит/обтекает с боку??

[ShumNo]

все дело в перцеширине

[DrStrangeLove]

все дело в перцеширине

Объясни, пожалуйста, поподробней..

Лучше с правильной ссылкой на спеку..

[Анна]

Мне тоже интересно, почему так происходит? При замене ширины с пикселей на проценты, он нормально работает.

[gurylyov]

И мне интересно

Помимо этого ещё во втором случае высота второго блока состоит из своей + высоты первого, что тоже не нормально.

[troll]

Согласно спецификации, строки, находящиеся рядом с флоатами, укорачиваются на ширину флоатов. Если строка при этом становится слишком мала для того, чтобы вместить какое-либо содержимое, она сдвигается вниз до тех пор, пока не удастся хотя бы что-нибудь в нее запихнуть. Так как у вас оба блока имеют одинаковую ширину, строки около флоата, грубо говоря, укорачиваются до нулевой длины, которой для слова "Content" в данных обстоятельствах явно недостаточно. Поэтому строка и перемещается вниз, растягивая свой родительский блок по вертикали.

Edited November 19, 2011 by troll

[Анна]

Я, похоже, поняла, думаю, это и имел ввиду troll, попробую объяснить своими словами.

Флоатный блок находится вне потока, в воздухе скажем, второй блок занимает также пространство под ним, и, когда ширина второго блока равна ширине флоатного, текст там не помещается, и блок расширяется по вертикали, чтобы разместить текст ниже. Т.е ширина второго блока должна быть равна ширине флоатного блока + ширина текста.

Edited November 20, 2011 by AnnaP

[DrStrangeLove]

Да, похоже, встаёт рядом только если div.right задать >= 248px.

[Switch74]

Content легко влезает в 200px

если задать 20px для .left, то .right тоже встаёт рядом с наездом на первый.

проблема в том, что указывая диву строго ширину 200px он становится по ширине 200px но при этом он занимает всю строку, если width:auto ,как у параграфа в первом примере, то всё замечательно. Если вам нужна ширина 200px для .right воспользуйтесь float:left.

Edited November 20, 2011 by Switch74