Вопрос по CSS float

Question

Говорят, что плавающее поле смещается влево или вправо до тех пор, пока его край поля не коснется края отступа содержащего блока или края поля другого всплывающего элементаверно.Не могли бы вы предоставить пример или объяснение правильной интерпретации (оба случая; для первого дочернего div и других дочерних div)

Answer 1

См. демонстрационная страница .

Плавающее поле смещается влево или вправо, пока его край поля не коснется края заполнения содержащего блока

Корректное . div, помеченный First item, компенсируется в сумме 30px из-за 10px заполнения его контейнера и 20px из-за его полей.

или край поля другого плавающего элемента

Также верно . Обратите внимание, что в общей сложности 40px между First item и Second item, так как оба элемента имеют 20px полей со всех сторон.

Обновлено для комментариев: Плавающий элемент выводит его из нормального потока документа. То есть, неплавающие элементы не будут "освобождать место" для всплывающих элементов. В большинстве примеров использование overflow: hidden; для очистки чисел с плавающей точкой эквивалентно другим методам, поэтому я использую его, потому что это меньше разметки. Дополнительную информацию смотрите в статье Quirksmode и в примере счетчика для скрытого переполнения .

Answer 2

вот простой пример ..

<style>
.size1{
   width: 50px;
   height: 50px;
   margin: 10px;
 }
 .size2{
   width: 400px;
   height: 400px;
   padding:50px;
 }
 .red{background-color:red;}
 .blue{background-color:blue;}
 .yellow{background-color:yellow;}
</style>

<div class='size2 red'>
  <div class='size1 blue' style='float:right'></div>
  <div class='size1 yellow' style='float:right'></div>
</div>

Answer 3

Ваша цитата верна

Плавающая коробка смещается влево или вправо до края поля касается края заполнения содержащего блока или края поля другого плавающего элемента

В основном это отражает спецификацию:

«Плавающие боксы будут перемещаться влево или вправо до их внешнего края касается края содержащего блока или внешнего края другого поплавка. ”

http://www.w3.org/TR/CSS2/visuren.html#floats

Насколько я знаю, внешний край также включает в себя margin и padding.

Смотрите этот пример здесь, где margin и padding соблюдаются.

Пример: http://jsfiddle.net/jasongennaro/K6mK5/