这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

为什么要清楚浮动

在前端开发的过程中我们在使用flex布局之外,我们经常也会使用到float 属性,它定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

当元素定义float属性来实现布局，这时候元素会脱离文档流，漂浮在页面上，影响其他网页元素(div盒子)的布局。所以，我们要清除浮动，让其他元素保持原布局。

css使用了浮动导致了父元素的塌陷问题要是用清除浮动
父盒子塌陷了

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {      
        background: red;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

清除浮动

1 .clear清楚浮动

需要增加一个新的标签给他在呢个价css样式

优点：通俗易懂，书写方便。
缺点：添加无意义的标签，网页结构化差。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {      
        background: red;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div style="clear: both;"></div>
    </div>
  </body>
</html>

2 . overflow: hidden

给父盒子添加 overflow: hidden通过触发BFC的方式，清除浮动效果。

优点：代码简洁。
缺点：无法显示溢出的元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {   
        margin: 60px;
        width: 900px;   
        background: red;
        overflow: hidden;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

3 伪类 (常用)

使用after在盒子后面添加清除浮动的内容，不用单独添加标签。

优点：符合闭合浮动思想，结构语义化正确。
缺点：IE6-7不支持:after，使用zoom:1;触发hasLayout。

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .container {
      margin: 60px;
      width: 900px;
      background: red;
      *zoom: 1;
    }

    .container::after {
      content: "";
      display: block;
      /* 不能少 */
      visibility: hidden; 
       /* 元素是不可见的。 */
      clear: both;
      overflow:hidden;
    }

    .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .box2 {
      float: right;
      width: 400px;
      height: 100px;
      background: cyan;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>

</html>

BFC

1. 定义

BFC(Block formatting context)直译为"块级格式化上下文"。它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候Block Formatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局

是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2. BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

3. 作用

形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局

利用BFC避免margin重叠。解决margin塌陷、margin合并、清除浮动流
左边定宽右边自适应两栏布局
子元素设置为浮动时,出现父元素盒子坍塌的问题

4. 触发方式

float不为none (left right)
position不为relative和static (absolute fixed)
overflow为auto scroll和hidden
display的值为table-cell或inline-bloc

参考文献: 什么是BFC？看这一篇就够了

css清除浮动的总结 与 BFC