First, Clear:both;
There is a problem with this approach: margin fails.
Second, partition method
<p class= "Box1" > </p> <p class= "cl HL" ></p>/* Wall */ <p class= "Box2" > </p>
cl{ clear:both; } . hl{ height:16px; }
The evolution of the "inner wall Method"
<p> <p></p> <p></p>/* Two P all float, so p will not be stretched out high */ <p class= "CL" ></p >/* Build a wall at home to give your son a high */</p>
Note: This method is generally not used and will increase the page label.
Third, Overflow:hidden;
The intention is to clear the overflow to the outside of the box text. However, it can be used as a folk prescription to clear the float.
Note: This method is generally not used because the area where the element is overrun is hidden.
Iv. use of pseudo-elements
. clearfix:after { content: '; height:0; line-height:0; /* or overflow:hidden*/ display:block; Visibility:hidden; Clear:both; }. clearfix { zoom:1; /* Compatible with ie6*/}
Five, double pseudo-element tag
Elements that do not exist on the page can be added via CSS, and each element has its own pseudo-element.
. clearfix:before,.clearfix:after { content: '; display:table; }. clearfix:after { clear:both; }. clearfix { zoom:1; }