块级格式化上下文(Block Formatting Context，简称BFC)
块级格式化上下文说明
-
定义：一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
-
不同的BFC区域，它们进行渲染时互不感染
-
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
块级格式化上下文具体规则
- 创建BCF的元素，它的自动高度需要计算浮动元素
– 原因： 为了隔绝内部和外部的联系，如果高度坍塌，浮动元素会跑到外面去
.container{
background: lightbule;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
- 创建BFC的元素，它的边框不会与浮动元素重叠
– 原因： 为了隔绝内部和外部的联系，不浮动的元素会避开浮动的元素(通过margin值实现),但还是排列在一行
.container{
background: lightbule;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
- 创建BFC的元素，不会和它的子元素进行外边距合并
.原因： 为了隔绝内部和外部的联系,container的BFC属于HTML，child的BFC属于container
.container{
background:#008c8c;
height:500px;
margin-top:30px;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
.child{
height:100px;
margin: 50px;
background: lightbule;
}
-
对比常规流块盒
* 在水平方向上，必须撑满包含块 * 在包含块的垂直方向独占一行依次摆放 * 外边距无缝隙相邻(包括padding border)，则进行外边距合并 * 自动高度和摆放位置，无视浮动元素，绝对，固定定位元素
BFC渲染区域
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
* 根元素： 意味着，<html>元素创建的BCF区域，覆盖了网页中所有的元素
* 浮动元素和绝对，固定定位元素
* overflow 不等于 visible的块盒(overflow:hidden)
