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

    <p class="box1">
    </p>
    <p class="cl hl"></p> /*墙*/
        <p class="box2">
    </p>

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

• The evolved "inner wall method"

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

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!