The reason for this problem is that according to the specification, if a box does not have padding-top and border-top, then the top margin of this box will be the top of the first child element in its internal document flow The distance overlaps.
The white point is: if the margin-top of the first child element of the parent element does not encounter a valid border or padding, it will continue to find its superiors (parent element, ancestor element) layer by layer. As long as an effective border or padding is set for the superior, it can effectively prevent it from overstepping.
Thinking of overflow: hidden has the ability to solve overflow, collapse, and clear floating, so overflow: hidden seems to be the best solution.
