float elements cannot hold up parent elements
this is a question you understand.
your code is in the case of margin folding, but this is not the case in this document you have given.
first look at the document you give:
the outer margin folding in the document belongs to the outer margin folding between parent and child elements, but only the result of folding is mentioned in the document.
here is the condition resulting from the outer margin folding of parent and child elements on MDN:
if there is no border, inner margin, inline content between the parent element and its first child element, no block formatting context is created, or the margin-top of the two is separated by clearing floats, or if there is no border, inner margin, inline content, height, min-height, and max-height between the parent element and its last child element, then folding occurs between these two pairs of outer margins. At this point, the outer margin of the child element "overflows" to the outside of the parent element.
name a qualified chestnut:
.box {
margin-top: 10px;
}
.item {
margin-top: 20px;
}
as a result, item and box have the same top margin-- 20px (where the top margin refers to visual effects), that is, what you give in the document:
The top margin of the
the top border edge of the box is deined to be the same as the parent's box is the same as that of the parent element.
is 20px. Results 20px is larger in both margin-top . In the case of
otherwise, there is no outer margin folding, and the result is a normal display.
add some elements before item to break the condition for outer margin folding:
<div class="box">
<span>something</span>
<div class="item">item</div>
</div>
look again at this time, the top margin of box is 10px, and the top margin of item is 30px (distance from the upper edge of the window), which is normal.
then analyze your sample code:
the outer margin folding that occurs when your code belongs to the empty block-level element .
when border is not set:
item floats, box is an empty block-level element.
if a block-level element does not contain anything, and there is no border, inner margin, inline content, height, and min-height between its margin-top and margin-bottom, the upper and lower margins of the element will collapse.
because the outer margin folding occurs in bo x, the larger margin between 20px and 10px is selected, so the box actually has a margin of 20px, and the floating item is positioned according to box , so the upper margin is also 20px.
when you set border , you break the condition of outer margin folding, so it is normal. The top margin of box is the 10px of margin-top . The floating item is positioned accordingly, that is, 10px.
in addition to these two kinds of outer margin folding, there is also the outer margin folding of adjacent elements , which is relatively simple, not to mention.
for a specific explanation of the outer margin folding problem, you can see MDN , the document you read is not so easy to understand, the most important thing is that what you read is not complete.
