Why do some floating elements decide to clear both?

Question

Initially, this example will only work in a browser that supports :nth-child , such as Chrome or FireFox. I have an unordered list in which elements with an odd number move left and left, and elements with an even list float on the right and on the right. For instance:

HTML:

 <ul class="waterfall"> <li style="height: 100px;">1</li> <li style="height: 200px;">2</li> <li style="height: 50px;">3</li> <li style="height: 100px;">4</li> <li style="height: 200px;">5</li> <li style="height: 50px;">6</li> <li style="height: 50px;">7</li> <li style="height: 50px;">8</li> </ul>​ 

CSS

 .waterfall {width:302px;} .waterfall LI { min-width: 150px; background-color: #CCC; margin-top: 2px; } .waterfall LI:nth-child(odd) { float: left; clear: left; text-align: right; } .waterfall LI:nth-child(even) { float: right; clear: right; text-align: left; }​ 

Here is the violin.

Goal:

All elements with an odd number should be placed on the left and stacked on top of each other, with no spaces between them, except for the 2px field. The same applies to items with an even list number, except that they should be floated to the right.

Questions in a nutshell:

I am confused why in this example, LI # 5 cannot appear above LI # 4, and LI # 8 cannot appear above LI # 7. In other words, why is LI # 5 cleaning LI # 2 and LI # 8 cleaning LI # 5? Also, why doesn't LI # 3 clear LI # 2 (I don't want this, but if LI # 5 clears LI # 2, why doesn't LI # 3 join the side)?

TL DR

My thoughts are still somewhat unconvincing. It looks like the browser does not want the top of the element to appear above the top of another element if the first element is defined later in the markup. It's true?

I understand that floating elements are placed on a line and that any floating elements that are not fitted on this line will simply jump to a new line and go from there (unlike the concept of a free stream of absolutely positioned elements), in other words, the moved element is removed from the stream documents, but not quite as literally as an absolutely positioned element, since the floating element is still located relative to any line from which it started, and still takes up space in the document flow NTA. So, how is the next "line" determined from which the elements of the fleet hang? In this example, why does LI # 3 not clear LI # 2, but LI # 5 is?

What I'm not looking for:

A smart solution to create this layout by changing layouts, discarding floats, or using JavaScript. I know how to do it all. I just want to learn the mysterious ways of swimming.

Answer 1

From CSS 2.1 spec :

Here are the exact rules that govern the behavior of floats:

1 The left outer edge of the left floating field may not be on the left of the left edge of its containing block. A similar rule holds for the right elements.

2 If the current field remains floating and there are any left-floating boxes created by elements earlier in the source document, then for each such earlier block, either the left outer edge of the current field should be to the right of the right outer edge of the earlier box, or its upper part should be below the bottom of the earlier box. Similar rules apply to regular floating boxes.

3, the right outer edge of the left floating field may not be to the right of the left outer edge of any right floating rectangle located next to it. Similar rules apply to right elements.

4 The floating outer top of the box cannot be higher than the top of its containing block. When a float occurs between two collapsible fields, the float is positioned as if it had an otherwise empty anonymous block parent while participating in the stream. The position of such a parent is determined by the rules in the margin collapse section.

5 The outer vertex of the floating box may not be higher than the outer top of any block or the floating field generated by an element earlier in the source document.

6 The outer top of a floating box item can be no higher than the top of any linear line containing the field generated by the item earlier in the source document.

7 A left floating box that has another left floating block to its left may not have its right outer edge to the right of its right edge of the block. (Free: a left float may not stick out on the right edge if it is as far as possible.) A similar rule holds for the right elements.

8 Floating field should be placed as high as possible.

9 The left floating unit should be located as far as possible on the left, possibly, the right floating box as far as possible to the right. a more preferred position is higher than more to the left / right.

So

It looks like the browser does not want the top of the element to appear above the top of another element if the first element is equal to the ones defined later in the markup. It's true?

Yes. It covers rules 5 and 6 above.

Answer 2

This is not as mysterious as you think, and your diagram in jsFiddle really illustrates it well. It can be difficult to explain in words, but I will try:

Essentially, 1 floats to the left, 2 floats to the right, and then 3 floats to the left and moves up under 2, because there is no rule that it needs to clear correctly.

When it comes to 4, which floats to the right, there is a rule, and therefore you see that the hard break was 4 moves under 2. This starts the cycle, since 5 now takes its position next to 4, and once again nothing stops 6 from compound 4 because he does not need to clean the left.

7 must be less than 5 for the same reason that 4 must be less than 3 and you go again. As mentioned in the comments, floating elements do not remove them from the stream, which is partly why you can float img in p rather than ending up with your photo at the top of the page, and this concept can also help you understand exactly what is going on.

Does it help at all or just makes things more confusing?

Answer 3

Set the JS classification and set the columns to 1px, and then 2px or 3px fields, or any space between each element. Good luck

http://masonry.desandro.com