Front-end tour HTML and CSS clear floating collapse

The following content is reproduced.

Method 1: Add a height to the ancestor of the floating element
If an element is to float, its ancestor elements must have a height. Height of the box in order to close the float.
As long as it floats in a box with height, the float will not affect the trailing elements. So it is to clear the impact of floating.
So just give Li's superior ul or div a height:40px; (as long as the upper element of the floating element is possible.) ), then the second Div is squeezed down and shown below the first box.
Method 2:clear:both;
However, in the actual development process, high height is seldom seen. Why? Because the content can be propped up high! That is to say, we have just explained the method 1, the work used very little.
So here are some people can be brain hole open: Can not write height, also the float cleared it? Also let float between, do not affect?
In fact, the solution is to add a clear:both to his superiors, the first clear is to remove the meaning, both, representing the left float and right float are cleared away. In layman's terms, it means to clear the influence of others on me.
Although this can clear the floating collapse phenomenon, but also has a fatal problem. That is the two div between, the margin value is invalid, cannot be set. Again, it means between two Div.
Method 3: Partition method
Since the use of Clear:both will result in two div between the margin failure, then someone in the back began to open the brain hole. In the middle an empty box, and then give the empty box clear:both;
After adding a wall, the second div can fall off and not interfere with the above elements. And the second Div can also be adjusted by magin-top two div ("wall" div not counted) between the spacing, so the partition method as a new routine along the spread.
Method 4: Partition method Evolution version-Interior wall method
Just change the position of the wall, the perfect solution The first Div cannot be margin-bottm to adjust the spacing between the div below.
So for a long time, the "inner wall method" has become the major companies to clear the floating mainstream writing.
Method 5:overflow:hidden;
Overflow:hidden; Overflow the contents of the box border, hidden.
This style is meant to erase text that overflows outside the box.
So this overflow:hidden, but also is a "ancestral old folk prescription", can cure floating collapse. Of course, since it is "folk prescription", there must be some special circumstances can not solve. Cause just become "folk prescription" on the unorthodox.
The special case is the position, if the location of the area beyond that box, Overflow:hidden, will be a lot of parts cut off. Therefore, in addition to this normal, Overflow:hidden, its simple and rough writing, or with the "inner wall Method" a struggle Zhengshi ability.

Front-end tour HTML and CSS clear floating collapse