BFC

1. 什么是BFC

BFC是块级格式化上下文是一个独立的渲染区域，让处于BFC内部的元素与外部的元素互相隔离使内外元素的定位不会互相影响。简单来说就是，BFC是一个完全独立的空间让空间里的子元素不会影响到外面的布局。

2. 怎么触发BFC

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: table-cell
• display: flex

3. BFC的规则

• BFC内的元素会在垂直方向一个接一个排列
• BFC就是页面中的一个隔离的独立容器，容器里的内容不会影响到外部内容
• 垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时浮动元素也参与计算

4. BFC的应用

• 清除浮动：使用float时元素会脱离文档流导致父元素高度塌陷，此时可以使父元素形成BFC解决高度塌陷问题。
• 自适应两栏布局：左float+右BFC，利用了BFC的区域不会与float的元素区域重叠
• 边距重叠：为两个垂直方向的div设置margin时，margin会取两者最大值而不是两者之和这就导致了margin塌陷问题，此问题可以通过BFC解决（为元素包裹一个盒子开启BFC形成独立的空间这样里面元素就不会影响到外部元素）。