BFC四步走

BFC四步走！！

第一步：什么是BFC（Block Formatting Context）？

BFC 翻译为 ‘块级格式化上下文’；它可以触发一个独立的容器，这个容器里面的布局和其他容器的布局或是容器外的布局互不影响，也可以理解为BFC的容器有自己的作用范围；

第二步：BFC的规则是什么？

1.内部的盒子会在垂直方向上一个接一个的放置
2.垂直方向的距离由margin决定（同一个BFC作用范围内的俩个相邻的盒子的margin会发生重叠，与方向无关）
3.每个元素的左边都会与父元素的左边相接触，包括浮动元素；
4.BFC的区域不会与浮动元素的区域重叠
5.计算BFC的高度时，浮动元素也参与计算
6.BFC是一个独立的容器，不会与容器外面相互影响；

第三步：怎么触发BFC？

1.overflow 的属性不是visible；(hidden,scroll,auto,inherit都会触发)；
2.float的属性不是none;(right,left,inherit都会触发)；
3.position的属性不是static和relative;(absolute,fixed，inherit都会触发)；
4.display的值为table-cell, table-caption, inline-block中的任何一个；

第四步：BFC有什么作用？

1.不和浮动元素重叠

俩个元素，一个浮动，一个不浮动，这个时候就会产生浮动元素覆盖不浮动元素的现象；这个时候给不浮动元素设置第三步里面的属性，使不浮动元素触发BFC;那么依据第二步里面的‘BFC的区域不会与浮动元素的区域重叠’，可以做成自适应俩栏布局；（给浮动元素一个固定的宽，触发BFC元素宽度未知，这个时候就是左边固定，右边自适应）

2.清除浮动

当子元素浮动时，父元素捕获不到子元素的高度，导致父元素高度无法被撑开；这就是高度塌陷；避免此类现发生，得清除浮动；
根据第二步的第五条‘BFC计算高度的时候，浮动元素也得计算在内’，可以给父元素设置第三步里面的属性，使父元素触发BFC,这时，就不会有高度塌陷问题；
注意：虽然可以解决问题，但清除浮动还是建议使用伪类元素；

3.解决margin边距重叠问题

上下俩个盒子都设置了margin：10px;本来打算看到的效果是俩个盒子相距20px;但实际上，俩个盒子的距离是10px;为什么不是20px呢？因为发生了外边距重叠问题；注意：这不是bug；
要解决这个问题，我们来看第二步里面的第二条：‘垂直方向的距离由margin决定（同一个BFC作用范围内的俩个相邻的盒子的margin会发生重叠，与方向无关）’；所以，让俩个盒子不在同一个BFC作用范围内就可以了；那么可以给其中一个元素的父级设置第三步里面的属性，使这个元素父级触发BFC,这时，就不会有边距重叠问题了；