包含块、层叠上下文、BFC

 

包含块

　　什么是包含块？简单来说，就是决定一个元素大小和定位的元素。一个元素会为它的内部元素创建包含块，但也不能说元素的包含块就是它的父元素：

1、position:fixed 的元素

　　包含块是当前可视窗口

2、position:absolute 的元素

　　包含块是最近的 position属性为非static的祖先元素

3、静态定位和相对定位 的元素

　　包含块是最近的块级祖先元素

 

层叠上下文

　　跟BFC相似，是可以创建出来的(z-index: Number)

　　同一个层叠上下文中，层叠级别由低到高：边框和背景、负z-index、块盒子、浮动盒子、行内盒子、z-index:0、正z-index

　　一个元素在Z轴上的堆叠顺序，由『层叠上下文』和『层叠顺序』决定：

　　　　1、同一个层叠上下文，层叠级别大的元素在上

　　　　2、同一个层叠上下文，层叠级别相同，后来居上

　　　　3、不同的层叠上下文，由父级元素层叠上下文决定

 

BFC（块级格式上下文）

　　创建BFC

　　1、float: left、right

　　2、positon: absolute、fixed

　　3、display: inline-block、table-caption、table-cell   (注：display为float、table、list-item等类型的会参与BFC，不会创建 )

　　4、overflow: auto、hidden、scroll

BFC的特点

　　1、在一个BFC内部，盒子会在垂直方向上排列

　　2、在一个BFC内部，相邻的margin-bottom和margin-top叠加

　　3、在一个BFC内部，每个元素左边紧贴着包含盒子的左边

　　4、在一个BFC内部，如果有一个内部元素是一个新的BFC，则新BFC区域不会与float元素的区域重叠

　　5、计算一个BFC高度时，内部浮动元素的高度也会参与计算

BFC用途

　　1、避免垂直外边距叠加     不让他们在同一个BFC里

　　2、清除浮动   如果一个元素是BFC，计算高度时，内部浮动子元素的高度也得算进去。这就是为什么我们经常用overflow清除浮动的原因

　　3、避免文字环绕  创建BFC后，新BFC就不会与float元素区域重叠了

　　4、自适应两列布局  同上