什么是BFC

BFC简称块级格式化上下文,是css2.1中提出的一个概念,他表示了一块区域,这块区域有自己独有的不受外部元素影响的子元素,并且这块区域也不干扰外界元素的这样一套渲染规则

哪些常见的方式会创建BFC

1. 固定或者绝对定位(fixed,position)
2. 浮动元素(float)
3. 弹性布局(flex,inline-flex)
4. 行内块元素(inline-block)
   ...

如何快速创建BFC

给父元素添加overflow:auto,或者display:flow-root(这个无副作用,但是可能会有一些兼容性问题)

解决了哪些问题

1. 垂直外边距合并问题

创建新的 BFC 避免两个相邻div 之间的 外边距合并 问题

2. 父元素高度塌陷问题

创建父元素的BFC,让子元素不影响到父元素的高度