Several methods to clear floats in CSS

1. clear:both;

There is a problem with this method: the margin is invalid.

2. Partition Wall Method

 
 
 /*墙*/ 
 

cl{ clear: both; } .hl{ height: 16px; }

• The evolved "inner wall method"

   
   
   /*两个p都浮动，所以p不会被撑出高*/ 
   /*在家里建一堵墙就能让儿子给p撑出高*/ 
  

  Copy after login

Note: Generally not used This method will add page tags.

3. overflow:hidden;

The original intention is to clear the text that overflows outside the box. However, it can be used as a folk remedy to clear up float.
Note: This method is generally not used because the area where this element is overflowed will be hidden.

4. Using pseudo elements

.clearfix:after { 　　　　content: ''; 　　　　 height: 0; 　　　　 line-height: 0; /*或 overflow:hidden*/ 　　　　display: block; 　　　　visibility: hidden; 　　　　clear: both; 　　　　} 　　　　.clearfix { 　　　　 zoom: 1; /*兼容ie6*/ 　　　　}

5. Double pseudo element tags

Elements that do not exist on the page can be added through css. Each element has its own pseudo element. element.

　　　　.clearfix:before,.clearfix:after { 　　　　 content: ''; 　　　　 display: table; 　　　　} 　　　　.clearfix:after { 　　　　clear: both; 　　　　} 　　　　.clearfix { 　　　　 zoom: 1; 　　　　}

The above is the detailed content of Several methods to clear floats in CSS. For more information, please follow other related articles on the PHP Chinese website!