Свободное перемещение и таинственно исчезающий контент

[rookie]

Есть такой HTML:

<div class="wrapper">
  <div class="a element"><p>A</p></div>
  <div class="b element"><p>B</p></div>
  <div class="c element"><p>C</p></div>
</div>

И такой CSS:

.wrapper {
	overflow: hidden;
	background: #555;
}

.element {
	width: 150px;
	height: 100px;
	font-size: 30px;
}

.a {
	background: #c33;
	float: left;
}

.b {
	background: #fc5;
	color: #333;
	float: left;
	margin-left: 150px;
}

.c {
	background: #247;
	margin-left: 150px;
}

Вопрос: куда девается контент из блока "c" и почему?

http://imageshack.us/photo/my-images/822/beforeti.png

http://imageshack.us/photo/my-images/97/aftern.png

Edited June 12, 2011 by rookie

[Int]

[psywalker]

1. На будущее, код вставляем в спец. теги для этого. Пока первое предупреждение, в след. раз бан незамедлительно.

2. По сабжу. Дело в том, что блоки с float; выпадают из потока и высота их родителя схлопывается в 0. Поэтому все блочные элементы, которые находятся после них, оказываются под ними, так как просто не замечают их. Можешь это проверить, убрав блоки а и б.

[rookie]

1. На будущее, код вставляем в спец. теги для этого. Пока первое предупреждение, в след. раз бан незамедлительно.

2. По сабжу. Дело в том, что блоки с float; выпадают из потока и высота их родителя схлопывается в 0. Поэтому все блочные элементы, которые находятся после них, оказываются под ними, так как просто не замечают их. Можешь это проверить, убрав блоки а и б.

1. Виноват. Исправил.

2. А при чем тут родитель плавающих элементов? Все три блока находятся в одном и том же контейнере - div.wrapper и если уж на то пошло то он схлопнется только до высоты последнего оставшегося в потоке блока - c.

В то же время, если я изменю CSS таким образом:

.b {
	background: #fc5;
	color: #333;
	float: left;
}

.c {
	background: #247;
	margin-left: 300px;
}

т.е. убрав у b левое поле и увеличив левое поле у c вдвое соответвенно, то содержимое c - параграф будет отображаться. С точки зрения общего потока - ничего не меняется, a и b как плавали влево так и плывут, однако в первом случае содержимое блока c исчезает, а во втором - нет. Соответственно вопрос в следующем - почему не видно контента блока c если мы его меняем местами с блоком b при помощи margin?

[psywalker]

Всё правильно. Ты прижимаешь два блока - "а" и "с" к левому краю, блок "с" в этом время оказывается под ними, т.е. как бы встаёт на их место, так как он их НЕ чувствует. Если ты ставишь блоку "с" левый отступ на ширину первых двух блоков, то тогда естественно он становиться видным.

2. А при чем тут родитель плавающих элементов?

Как причём? При том, что он НЕ чувствует внутри себя блоки "а" и "б".

А вообще у тебя вот он чувствует их, так как стоит и благодаря этому свойству он не схлопывается.

.wrapper {

overflow: hidden;

то содержимое c - параграф будет отображаться.

Отображается не параграф, а его текст, так как он обтекает плавающий блок.

[rookie]

Все, додумался. Текст параграфа обрезался через overflow: hidden. psywalker, Int, спасибо за ответы. Однако у меня появился новый вопрос. Почему если блоку c задать margin-left: 150px - содержимое(текст) обтекает плавающие блоки и появляется снизу:

, а если увеличить поле скажем до 350px обтекания не происходит:

По логике вещей, раз мы отодвинули плавающий блок b на расстояние достаточное чтобы втиснуть находящийся в нормальном потоке блок c то его содержимое не должно обтекать плавающие блоки. Разве нет?

[psywalker]

Текст блока "с" всегда пытается до последнего втиснуться после ближайшего блока с float; Если ему не хватает места, то он перебрасывается на след. строку.

[rookie]

Текст блока "с" всегда пытается до последнего втиснуться после ближайшего блока с float; Если ему не хватает места, то он перебрасывается на след. строку.

Т.е. в первом случае(верхнее изображение) блок c "думает" что блок b идет сразу после блока a и игнорирует тот факт, что к b применен margin-left, так что ли?

[psywalker]

Текст блока "с" всегда пытается до последнего втиснуться после ближайшего блока с float; Если ему не хватает места, то он перебрасывается на след. строку.

Т.е. в первом случае(верхнее изображение) блок c "думает" что блок b идет сразу после блока a и игнорирует тот факт, что к b применен margin-left, так что ли?

ага)

[rookie]

ага)

Ясно, спасибо за терпение и ответы

[psywalker]

ага)

Ясно, спасибо за терпение и ответы

Тебе спасибо