清除浮动有哪几种方式

清除浮动有哪几种方式

一、额外标签法

闭合思想(用最后一个盒子作为隔板)

  ul{
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid #000;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 5px;
      float: left;
    }
    .ewai{
      clear: both;
    }
    div{
      height: 200px;
      background-color: pink;
    }
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div class="ewai"></div>
    <!-- 原理就就像一堵墙 封闭着下面 -->
   </ul>
  <div></div>

二、触发BFC

给父元素添加overflow: hidden

    ul{
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid #000;
      overflow: hidden;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 5px;
      float: left;
    }
    div{
      height: 200px;
      background-color: pink;
    }
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>
  <div></div>

三、单伪元素法

给父元素添加after伪元素(和额外标签法思想一样)

    ul{
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid #000;
    } 
    .clearfix::after{
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .clearfix{
      *zoom:1;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 5px;
      float: left;
    }
    div{
      height: 200px;
      background-color: pink;
    }
   <ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>
  <div></div>

四、双伪元素法

给父元素添加before伪元素和after伪元素(前后两个隔板)

    ul{
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid #000;
      overflow: hidden;
    }
    .clearfix::before,.clearfix::after{
      content: "";
      display: table;
    }
    .clearfix::after{
      clear: both;
    }
    .clearfix{
      *zoom:1;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 5px;
      float: left;
    }
    div{
      height: 200px;
      background-color: pink;
    }
   <ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>
  <div></div>