清除浮动原理、clear原理、bfc原理

一、clear

clear 属性定义了元素的哪边上不允许出现浮动元素。并不是将浮动元素变成了非浮动的，而是将该元素左右的浮动元素放到下一行。

 left ：在左侧不允许浮动元素
right ：在右侧不允许浮动元素
both ：在左右两侧均不允许浮动元素
none：默认。允许浮动元素出现在两侧。

推荐使用伪元素方式清除浮动，代码如下

.clearfix{
    zoom: 1;/*zoom：1 触发IE hasLayout。*/
    &::after{
      content: " 111";
      display: block;
      clear: both;
      font-size: 0;
      height: 0;
      visibility: hidden;
    }
}

after伪元素会在内容的最后加入元素，通过 content:"XXX" 生成内容作为最后一个元素，然后给该伪元素设置clear来清除浮动使父元素框撑开，设置伪元素为块级内容撑开剩余空间，同时使用visibility来隐去加入的内容。

二、bfc原理

也可以通过给父级元素增加overflow：hidden来清除浮动

使用这个方法即触发了bfc，bfc是什么呢？

BFC（Block Formatting Context ）块级格式化上下文，是css布局的一个概念。是一块独立的渲染区域，里面的元素不会影响到外部的元素，外部的元素不会影响里面的元素。HTML标签就是最大的一个bfc区域。

BFC原理（布局规则）

• 内部的box会在垂直方向，从顶部开始一个接一个的放置
• box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的box的margin会发生重叠
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠（清浮动）
• 计算BFC的高度时，浮动子元素也参与计算

 触发BFC的方式

1.  根元素，HTML
2. 浮动，float的值不是none
3. 绝对定位元素 position的值为absolute或者fixed
4. 行内块 display为inline-block
5. 表格单元 display为table，table-cell，table-caption等
6. 弹性盒 display为flex、inline-flex
7. overflow的值不为visible

 bfc的使用场景

1. 清除浮动
2. 自适应两栏布局
3. 去除margin重叠现象，分属于不同的bfc时，可以避免margin重叠

 不推荐使用overflow来清除浮动的原因为，极有可能会导致超出的元素被隐藏，或者出现滚动条从而影响美观。