Why is this non-floating margin crumbling with a float?

Question

Studying this issue of cleaning floats, I came across an unusual situation with margins and a gap with a non-floating box.

According to section 8.3.1 of the specification, a field crash should not occur if either

• at least one of the elements generating the fields is a float or
• clearance on the way.

But consider a series of floating boxes, the last of which clears the rest:

<div class="container"> <div></div> <div></div> <div></div> <div></div> </div> 

 div.container > div { float: left; width: 50px; height: 50px; margin: 10px; } div.container > div:last-child { clear: left; } 

As expected, both the horizontal and vertical gaps between each field are 20 pixels wide . Vertical fields are not destroyed.

However, when the clearing element does not float, it jumps 10 pixels, as if its upper edge is compressed with a floating point above it .

This behavior completely ignores both of the above conditions:

• There is clearance.
• In order for the occurrence of clearance to occur, first of all, there must be some other float. The fact that the cleaning element itself does not float should not be relevant.

This behavior also seems consistent across browsers, including versions of IE that have a lower version.

However, I do not pretend to know the CSS floating point model as the back of my hand, so ... Can anyone explain why this is happening?

Answer 1

Nothing, I think I found it myself. It seems that the following assumption in my question was wrong (said that I am not completely masking the CSS float model):

The fact that the cleaning element itself does not float should not be relevant.

In section 9.5.2 , which describes the clear property, he says:

Calculation of the gap of the element on which “clear” is installed is performed by determining the hypothetical position of the upper edge of the element boundary. This is the position where the actual top border would be if the element's "clear" property were "none".

If this hypothetical position of the upper edge of the element boundary does not pass by the corresponding floats, then a gap is entered, and the fields are collapsed in accordance with the rules in 8.3.1.

Then the size of the gap is set to a larger:

• The amount needed to place the boundary edge of the block even with the lower outer edge of the lowest float to be cleaned.
• The amount required to place the upper boundary edge of the block in its hypothetical position.

And further in this section it says:

When a property is set to floating elements, it modifies the rules for float placement. An additional restriction is added (# 10):

• The upper outer edge of the float must be lower than the lower outer edge of all the early left-floating fields (in the case of "clear: left") or all the early right-floating fields (in the case of "clear: right") or both ("clear: both").

Note that “outer edge” is synonymous with “edge edge” as described in section 8.1 .)

In essence, this means that if the cleaning element does not float, and its upper marker by itself does not push it far enough away from the floats, then the element extends sufficiently so that its upper border is located directly below the lower edge of the float. Although it would seem that the upper edge collapses with the lower edge of the float, in fact, the upper field has no significant effect, because it does not reach the boundary edge of the cleaning element.

Otherwise, if the cleaning element floats, then its upper edge is taken into account, so to speak (in accordance with the rules set out in 8.3.1).

And when I write this, I remember that the non-floating elements in the stream are positioned as if the floating elements never started, because the floats are taken out of the normal stream. In other words, any top field that is mounted on a non-floating cleaning element does not take into account any floats, regardless of whether there is enough to clean it. For example, when both clear and float set to none on the last element, it sits flush with the edges of its container in the exact same position as the first floating element, although behind it (note that the borders at the edge of the container are blocked between it and container).

Finally, the fact that the permission is entered is not really relevant to this particular situation, since the allowed fields marker is minimized only when the fields of the element usually collapsed if its clear property was set to none . Since we are talking about floats here, a crash collapse will never really happen normally, and therefore, regardless of whether the last element is clearing is not relevant (not directly, one way or another).