记录学习web的过程

BFC

今天刚学到BFC，什么是BFC，什么情况下能够触发BFC，BFC有什么作用？

1.首先需要明确的是不是所有的元素都能够触发BFC，根据W3C规范，display 属性是block，list-item，table 会产生BFC。

2.给元素添加如下属性，就可以触发BFC

float不为none

position为absolute或fixed

display为inlne-block table-cell table-caption flex inline-flex

overflow不为visible（自认为这个是用的比较多的）

3.BFC特性

盒子从顶端开始垂直接连排列

垂直方向的距离由margin决定，属于同一个BFC的相邻盒子的margin会发生重叠 （这个时候把其中一个盒子添加一个新的BFC使他们不是同一个BFC）

BFC不会与浮动盒子产生交集，紧贴浮动边缘

计算BFC的高度，也会检测浮动盒子的高度

4.BFC的主要用途

清除元素内部浮动（把父元素设为BFC就可以清理子元素的浮动，父元素设置overflow：hidden）

解决外边距合并问题 （创建不属于同一个BFC）

制作右侧盒子自适应（左浮动右BFC）

---

2019-11-28 14:23:23            （有错误请大家及时指出，不断学习中）