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会在垂直方向,一个接一个的放置。