BFC

1.什么是BFC？

• 直译块格式化上下文（Block Formatting Context），它是一个独立渲染的区域

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

2.如何触发BFC或者为元素添加BFC属性？

• 根元素html
• 浮动元素float的值不是none
• 定位元素的position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow的值不为visible

3.BFC的特性和作用

1.可以避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖