什么是BFC？如何创建BFC？

笔记

BFC是什么？

• BFC是只块级格式化上下文

如何创建BFC？

• float的值不为none
• overflow的值不为visible
• position的值为fixed/absolute
• display的值为inline-block/flex/inline-flex

BFC的特性

• 同一个BFC的两个相邻容器的上下margin会重叠
• 计算BFC高度时浮动的元素也会参与计算
• BFC的区域不会与浮动元素发生重叠
• BFC是独立的容器，容器内部元素不会影响容器外部的元素

BFC应用

• 外边距重叠问题（BFC 是独立容器，容器内部的元素不会影响到元素外部的元素）
• 父元素高度塌陷（计算BFC容器的高度时浮动元素也参与计算）
• 浮动元素后一个普通元素被覆盖（BFC的区域不会与浮动容器发生重叠）

BFC与普通流的区别

• 1.普通文档流布局浮动元素是不会被父元素计算高度
• 2.普通文档流布局的非浮动元素会覆盖浮动元素的位置
• 3.普通文档流布局的margin会传递给父级
• 4.普通文档流布局两个相邻的元素上下margin会重叠