理解BFC

FC

Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

 

BFC

“块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。+

简单讲，就是在布局里的某个元素，他的子元素不会再影响到外面的布局

按照这个概念，那么以下内容皆可以称为bfc

1.设置浮动，元素在处于浮动状态时并不会影响外部的元素，也是有一部分脱离文档流的能力

2.绝对定位，固定定位，这两个直接就脱离文档流，自然不会影响文档流上的其他内容

3.overflow，这个属性的功能就是处理超出部分的内容，在设置为auto，hiddle之后也就不会影响外部元素

4  inline-block / table-cell / table-caption / flex / inline-flex

 

 

 

 BFC特性

 

1，bfc规定内部的元素上下直接的margin重叠，也叫边距合并

2，bf计算高度时，会将浮动元素也参与计算

3，处于文档流内的bfc盒子相互不会重叠

4，BFC内部的Box会在垂直方向，一个接一个的放置。