Why do floats start with sibling elements?

Why does the float start with the sibling element instead of the parent container?

.a,
.b {
    padding: 100px;
    background: -sharpccc;
    margin-top: 30px;
}
.a {
    float: left;
    background: pink;
}

<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
Css
Jun.17,2022

the margin-top of the floating element is the parent element as the starting point.
but not a floating element, but the margin-top action can overflow on a parent element that does not have a margin-top. This means that your parent element has the upper margin of the 30px.
so, instead of floating elements starting with sibling elements, your entire parent element is due to the overall downward movement of the upper margin


b the margin-top penetrates to the body, you can observe normal typesetting by adding any attributes to body that prevent margin collapsing, such as border.


did you also set margin-top for the parent element


how amazing!
adding border to body is normal again.

b</div>
</body>
Menu