Question on CSS float

It is said that The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block, or the margin edge of another floated element

However i do not think this is correc开发者_开发技巧t. Could you please provide an example or an explanation of the correct interpretation (both cases ; for a first child div and other sibling divs)

---

See this demo page.

The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block

Correct. The div labeled First item is offset a total of 30px, due to the 10px of padding on its container and 20px due to its margins.

or the margin edge of another floated element

Also correct. Notice how there is a total of 40px between First item and Second item, due to both elements having 20px of margins all around.

Updated for comments: Floating an element takes it out of the normal flow of the document. That is, non-floated elements will not "make room" for floated elements. In most examples, using overflow: hidden; to clear floats is equivalent to the other methods, so I use it because it's less markup. For more info, see the Quirksmode article and a counter example for overflow hidden.

---

here is a simple example..

<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>

---

Your quote is correct

The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block, or the margin edge of another floated element

Basically it mirrors the spec:

“Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.”

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

As far as I know, outer edge also includes margin and padding.

See this example here, where margin and padding are respected.

Example: http://jsfiddle.net/jasongennaro/K6mK5/