BFC

概念

BFC全称为Block Formatting Context，即“块级格式化上下文”，它是页面中相对独立的一块渲染区域，它决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互作用关系

特点

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向上的距离由margin决定。（属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

css时的几条规则

• Block元素会扩展到与父元素同宽，所以block元素会垂直排列
• 垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
• 浮动元素会尽量接近往左上方（或右上方）
• 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素

创建BFC常见方式

• body根元素
• float不为none
• overflow为auto、scroll或hidden（不为visible）
• display为inline -block
• position为fixed或absolute