Here are two articles you can read, one is about overflow:hidden wrapping property to clear floats, and the other is about BFC.
http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE% E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
According to teacher Zhang Xinxu, it is overflow:hidden and position: absolute will have wrapping properties, so it will wrap the floating elements, which means clearing the floats. Of course, I have not tried whether absolute can clear the floats.

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
There are two rules in BFC:
1. BFC is a Isolated independent container, the child elements inside the container will not affect the elements outside. And vice versa.
2. When calculating the height of BFC, floating elements also participate in the calculation
overflow:hidden will generate BFC, so the internal child elements will not affect the parent element, so the height will not collapse.

There are four ways to solve it:

Option 1

Add an element that clears the float below the floating element: p{clear:both}

html

<p class="clearfix">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Option 2

Set the parent element to float as well

html

<p style="float: left;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>
</p>

Option 3

Explicitly setting the height of the parent element is not recommended

html

<p style="height: 400px;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

Option 4

Add overflow:hidded attribute or overflow:autoattribute

html

<p style="overflow: hidden;">
    <p style="float: left;">p 1</p>
    <p style="float: left;">p 2</p>        
</p>

The above four options, option one is more reliable and has the strongest compatibility

Pseudo element settings {content:"";display:table;}
Empty p settings {clear:both}
and parent elements: {overflow:auto}
I only know these.

As for your overflow:hidden;, did you write it wrong?

Overflow hidden is to hide the excess content
What I usually use is the clear both you mentioned. There is no problem
Or if you are happy, you can also directly float the parent node, but it is not recommended to do so. As a result, all elements are floated and more problems may arise

Only three types are known. There seems to be no reason. Just remember

Clearfix is ​​still the best method

Clear Float summarizes it well and should answer your questions.

Everyone is right. Let me add that basically all CSS frameworks have a class called clearfix. You only need to add this class name to the p of the float.

.clearfix:after{ clear:both; display:block; content:"";}
.clearfix{ zoom:1;}

Add these two lines of code to the css, and add the clearfix class to the parent of the floating element (the element is floated, and the parent clears the float)

There are methods online that you can try slowly by yourself! It’s more intuitive to see the difference by trying it yourself! For example, use the method of adding height to the parent element, and then try to use margin for the floating element to see if it is the same as the normal document flow! Anyway, I personally think it is more convenient to add the after pseudo-class to the parent element!