bfc独立渲染区

Bfc是什么

1.bfc是每个元素的独立渲染区

2.浏览器的视图为一个3d视图，每一层元素都是犹如千层片一般一层层渲染到z轴上的

3.除了position:absolute和position:fixed的元素的

构建bfc的条件

·  根元素或其它包含它的元素

·  浮动元素 (元素的 float 不是 none)

·  绝对定位元素 (元素具有 position 为 absolute 或 fixed)

·  内联块 (元素具有 display: inline-block)

·  表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

·  表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

·  具有overflow 且值不是 visible 的块元素，

·  display: flow-root

·  column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

·  一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

bfc的构建案例

1.html标签的document对象在初次渲染完毕时，document对象会构建一个z-index:0的初始化独立渲染去，这个独立渲染区层级最低且无法更改

2.inline-block的bfc元素的z-index层级高于block的bfc元素的层级,block元素不会构建一个bfc，它的bfc层级最低，它属于根元素html标签构建的document对象在浏览器视图中所构建的bfc渲染区

 

bfc层级关系

postion的bfc>非postion的bfc>document文档对象默认的初始bfc

bfc的作用

bfc决定各种bfc独立渲染区渲染完之后的元素的z轴显示层级和元素基于z轴的事件触发层级