Float

[mr.Dassler]

Подскажите пожалуйста почему так вот два блока один плавающий 2ой нет ,2ой находится под ним.Почему он его не обтекает с левой стороны а ноходится под ним и у него пропадает фон?? [ code ]http://savepic.su/638264.jpg[ /code ]

.blok1 { width:200px;

height:150px;

background:orange;

border:1px solid;

float:left; }

.blok2 {

width:200px;

height:150px;

background:yellow;

border:1px solid; }

<div class="blok1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div class="blok2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>

Edited November 2, 2011 by mr.Dassler

[Justnewone]

Вот прям иделальный случай описали, если бы надо в учебнике пример флоата - то что надо.

Ссылку надо

[ceil100]

вообще-то все правильно

фон не пропадает, он под первым блоком

[Justnewone]

Есть такое, почему-то очевидный прием не работает!!! щас разберемся.

[ceil100]

дайте блоку 2 margin-left:200px и увидите, что он не исчез

а не работает потому-что ширина ограничена принудительно

[Justnewone]

С флоатом вторым, да, все пашет. НО ДОЛЖНО и без этого!

[ceil100]

ширину у второго убрать надо

или увеличить

став флоатом, первый блок выпал из потока и заместил место первого, а его контент выдавил вниз

[mr.Dassler]

просто ширина надо чтоб одинаковая была. А почему обтекание не работает? какое именно тут правило включается??

[Justnewone]

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

[ceil100]

чтобы он встал справа надо margin-left:200px указать

и это не значит, что он встал справа

просто он отодвинулся вправо на 200px

[mr.Dassler]

чтобы он встал справа надо margin-left:200px указать

и это не значит, что он встал справа

просто он отодвинулся вправо на 200px

так а почему обтекание не работает оно же с floatом должно быть.

Edited November 2, 2011 by mr.Dassler

[amelice]

просто ширина надо чтоб одинаковая была. А почему обтекание не работает? какое именно тут правило включается??

1.Обычные блоки в нормальном потоке не учитывают "флоатов".

2.Тексты учитывают Флоаты.

В вашем примере получается флоат встал на свое место. Обычный блок его "не видит", то есть перекрыл, но так как текст внутри второго блока учитывает флоат, то он выпал с блока. Чтобы такого не случилось обычно задается overflow:hidden или clear:left для второго блока.

Точнее второй блок не перекрыл, а встал под флоатом. А вот это не понятно.

В коде он идет последним по идее должен был перекрыть. Вот хотелось тоже знать.