Generally, clear:both is used to clear floats, but I found that many people use overflow: hidden to clear floats. Its original intention is to hide redundant things. Why can it clear floats?
It’s because overflow will re-establish block formatting (block formatting context) floats, position absolute, inline-block, table-cell for the elements in it except (visible) and table-caption are not block-level styles, so clear is used to control floating overflow. Floating can also be cleared because when overflow is set on the parent element, in addition to visible, it will also be created when there is only auto, hidden or scroll. The new block-level format gives its child elements a clear floating effect. The specific information can be seen here. Although clear is an old method, it is still recommended to use clear. Some situations will be better handled than overflow
The overflow:hidden attribute is equivalent to letting the parent stick to the content, so that it can stick to the content in its object (including div boxes using float), thus clearing the float. Clear:both uses the method of clearing floats at the child level. You can see it clearly by looking at the location used.
<div style="overflow:hidden"> <div style="float:left"></div></div>
<div > <div style="float:left"></div> <div style="style="clear:both""></div></div>
is because overflow will re-establish block formatting context (block formatting context) floats for its elements in addition to (visible). Position absolute, inline-block, table-cell and table-caption are not block-level styles, so clear is used to control floating overflow. Floating can also be cleared because when overflow is set on the parent element, in addition to visible, there is only When auto, hidden or scrolling, a new block-level format will be created for its child elements to achieve a clear floating effect. The specific information can be seen here. Although clear is an old method, it is still recommended to use clear in some cases. It will be handled better than overflow
The overflow:hidden attribute is equivalent to letting the parent stick to the content, so that it can stick to the content within its object (including div boxes using float), thus clearing the float. Clear:both uses the method of clearing floats at the child level. You can see it clearly by looking at the location used.
<div style="overflow:hidden"> <div style="float:left"></div></div>
<div > <div style="float:left"></div> <div style="style="clear:both""></div></div>