BFC
概念
BFC 全称 Block Formatting Contexts
块级格式化上下文
BFC 就是一个独立的布局环境,BFC 内部的元素布局与外部互不影响
标准流中的 body 元素本身就是一个天然的 BFC
触发(父元素) BFC 的常见方式
设置浮动
overflow
设置为auto
、scroll
、hidden
position
设置为absolute
、fixed
display
设置为inline-block
、table-cell
其他的方式见 mdn
BFC 的应用
主要是解决一些布局问题
解决浮动元素令父元素高度塌陷的问题
解决非浮动元素被浮动元素覆盖的问题(两栏布局常见问题)
解决外边距垂直方向重合(取最大)的问题