我对BFC的理解

• BFC:块级元素的格式化上下文/布局环境

• BFC的特性:

  • 在BFC中，box会在垂直方向上一个挨着一个的排布；

  • 垂直方向的间距由margin属性决定；

  • 在同一个BFC中，相邻两个box之间的margin会折叠**（collapse）；

  • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

• BFC的主要作用有两个

  • 解决margin折叠问题

  • 解决浮动高度塌陷问题

• 关于解决margin折叠问题背后的原理:利用BFC特性.

  BFC的特性3:在同一个BFC中，相邻两个box之间的margin会折叠,

  • ==>让两个box是不同的BFC,就可以解决折叠问题.

  如何让两个box在不同的BFC中?两步走

  • ==>给其中一个box包裹一层div.

  • ==>触发BFC:给包裹box的父元素(container)设置为overflow值不为visible.

• 关于解决浮动高度塌陷问题背后的原理

  本质:BFC可以解决浮动元素因为脱标而造成高度塌陷的问题,但是不能解决absolutely定位元素脱标造成的高度塌陷问题.

  原理分析:官方文档标明BFC的高度是auto的情况下的高度计算方法决定

  • BFC高度为auto,如果有absoltely元素,即使加了BFC,如果有absolutely的定位元素也会被ignored,因此父元素还是不会计算高度;

  • BFC高度为auto,如果有浮动元素,父元素会增加自己的高度直到能够包含浮动元素的下边缘,此时就会有高度,可以解决高度塌陷的问题.