定义
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Box-level参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
Box：CSS布局的对象和基本单位； Formatting Context：一块渲染区域，并且有一套渲染规则
那些元素会形成BFC
- 根元素(body)(有误？设置html：overflow:auto; body设置:overflow:auto;)
- float属性不为none
- position为absoulte或者fixed
- display为inline-block，table-cell，table-caption，flex，inline-flex
- overflow不为visibile
BFC布局规则
- 内部的Box会在垂直方向上，一个接一个放置
- Box垂直方向的距离由margin决定。属于一个BFC的两个相邻Box的margin会叠加
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC区域不会与float box重叠
- BFC就是页面上一个隔离的独立容器，容器里的子元素不会影响到外面的元素。反之如此
- 计算BFC高度时，浮动元素也要参与计算。
BFC作用
对于以上的规则，我们通过例子进行剖析，总结BFC的作用：
-
自适应两列布局
``` <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; /*overflow: hidden;*/ } </style> <body> <div class="aside">aside</div> <div class="main">main</div> </body> ```效果图为：
bfc-1
参考第3条：
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。可知main的左边框和父元素的border接触。
而依据第4条规定:
BFC区域不会与float box重叠我们触发main的bfc，给其设置 overflow: hidden；可以得到如下的效果：从而实现了两列布局。
bfc-2
-
清除内部浮动
<style> .par { border: 1px solid #fcc; width: 100px; /*overflow: auto*/ } .child { border: 1px solid #f66; width:30px; height: 30px; float: left; }
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
```
bfc-3
参考第6条：
计算BFC高度时，浮动元素也要参与计算。
可知，父元素触发了bfc后，在计算父元素高度时会把浮动的子元素也计算在内，从而达到清除浮动的作用：
- 防止垂直的margin重叠
<style>
p {
color: #f55;
background: #fcc;
width: 100px;
line-height: 20px;
text-align:center;
margin: 20px;
}
</style>
<body style="border: 1px solid #aaa; width: 140px;">
<p>Haha</p>
<p>Hehe</p>
</body>
效果为：
bfc-5
可知两个相邻的元素，其margin发生的和重叠，两者之间的距离为20px。
依据第2条：
Box垂直方向的距离由margin决定。属于一个BFC的两个相邻Box的margin会叠加
把第二个元素进行包裹，可以得到两者之间的margin扩大为两个元素margin之和：
<style>
p {
color: #f55;
background: #fcc;
width: 100px;
line-height: 20px;
text-align:center;
margin: 20px;
}
.wrap{overflow: hidden;}
</style>
<body style="border: 1px solid #aaa; width: 140px;">
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
效果为：
bfc-6
总结
上述的几个例子，都符合第5条规则：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理
网友评论