清除浮动

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）（不推荐）

本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .fahter {
        width: 400px;
        border: 1px solid deeppink;
      }
      .big {
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
      }
      .small {
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
      }
      .footer {
        width: 900px;
        height: 100px;
        background: darkslateblue;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="fahter">
      <div class="big">big</div>
      <div class="small">small</div>
      <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
  </body>
</html>

父级添加 overflow 属性（父元素添加 overflow:hidden）（不推荐）
通过触发 BFC 方式，实现清除浮动内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

bfc

BFC 全称为块格式化上下文 (Block Formatting Context):是 Web 页面的可视化 CSS 渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域

.fahter {
  width: 400px;
  border: 1px solid deeppink;
  overflow: hidden;
}

使用 after 伪元素清除浮动（推荐使用）

<style>
  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }
</style>

<body>
  <div class="fahter clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
    <!--<div class="clear">额外标签法</div>-->
  </div>
  <div class="footer"></div>
</body>

使用 before 和 after 双伪元素清除浮动

<style>
  .clearfix:after,
  .clearfix:before {
    content: '';
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
</style>

<div class="fahter clearfix">
  <div class="big">big</div>
  <div class="small">small</div>
</div>
<div class="footer"></div>
```