CSS standard closed floating element introduction

According to CSS specifications, floats will be removed from the document stream, without affecting the layout of block boxes, but only the arrangement of inline boxes (usually text. Therefore, when its height exceeds the container, the parent container will not automatically stretch to close the floating element. But sometimes we need this kind of automatic closing behavior. What should we do?
One way is to insert an additional label in the parent container and clear it to support the parent container. In this way, the browser is compatible and there is no problem. The disadvantage is that additional (and usually non-semantic) labels are required, so I personally don't like it. Later, we came up with a new method, using the: after pseudo-class dynamic embedding of an element used to clear floating. This method is the same as the previous one, the difference is that this extra content is generated using CSS, but considering that IE does not support it: after has to do a lot of hack. This method is generally compatible, but after a variety of hack can also cope with different browsers, while at the same time can ensure that html is relatively clean, so it is used more. Later, someone found that setting the parent container's overflow to a value other than visible can close floating elements in a standard compatible browser, which is naturally not supported by IE, this method is similar to the previous method in that it processes IE differently (specifically, it triggers layout). The difference is that overflow is not as troublesome as the "after" pseudo class, but also has its disadvantages, overflow may cause some minor conflicts. Before using overflow, there was another way to use float, that is, let the parent container also float, which took advantage of a feature of the floating element-the floating element will close the floating element. This method works well in both IE/Win and standard compatible browsers, but its disadvantages are also obvious-the parent container may not be floating if it wants to float, after all, floating is a special behavior, and sometimes it is normal that the layout does not allow its floating. Although float can be used to close floating elements in both IE and standard compatible browsers, its principle is different. In IE/Win, float triggers layout and closes the floating, in a standard-compatible browser, float, like the overflow principle in the previous method, produces a "block-level formatting range"-a phenomenon mentioned in the CSS specification, it is often independent. One of its features is to automatically close the floating elements inside.
According to the specifications, the following types of elements produce a block-level format range:
Float elements, left or right.
Absolute positioning element.
Inline-block element, but this gecko currently does not support.
The table-cell type elements can also be table, table-head-group, and table-row, and inline-table (not supported by gecko, because they both generate an anonymous table-cell indirectly.
The value of overflow is a non-visible element.
Therefore, in a standard compatible browser, we can also use so many methods to close a floating element, and only CSS is required. By the way, in addition to overflow, all the other effects are to automatically contract the width of the parent container.