CSS之BFC（Block formatting context

web.jpg

BFC（Block formatting context）

• BFC是一个独立的渲染区域，之可以块级元素参与其中，主要规定了块级元素如何布局，与（BFC）外部的区域没有什么关系。

触发条件

• float属性不为none
• position为absolute或者field
• display为inline-blok.flex,inline-flex
• overflow不为visible

特点

• 在 BFC中，盒子从顶端开始垂直地一个接一个的排列
• 盒子垂直方向距离有margin决定，属性同一个BFC的2个盒子的margin会发生重叠
• 在BFC中，每一个盒子的左边缘margin-left会碰到容器的左边缘border-left
• BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
• BFC在计算高度时，自然会检测浮动的盒子的高度