BFC
块级格式化上下文（Block Formatting Context）。
什么叫块级格式化上下文？
在块盒子布局过程中，使用以下css属性进行布局所产生的的区域就是块级格式化上下文*。
-
根元素(
<html>) -
浮动元素（元素的
float不是none） -
绝对定位元素（元素的
position为absolute或fixed） -
行内块元素（元素的
display为inline-block） -
表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） -
表格标题（元素的
display为table-caption，HTML表格标题默认为该值） -
匿名表格单元格元素（元素的
display为table、``table-row、table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table） -
overflow值不为visible的块元素 -
display值为flow-root的元素 -
contain值为layout、content或 paint 的元素 -
弹性元素（
display为flex或inline-flex元素的直接子元素） -
网格元素（
display为grid或inline-grid元素的直接子元素） -
多列容器（元素的
column-count或column-width不为auto，包括 ``column-count为1） -
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
块级格式化上下文对浮动定位与清楚浮动很重要。浮动定位和清除浮动时只会对同一个BFC内的元素起作用，不会影响其它BFC的布局。外边距折叠也只会对同一BFC内的元素起作用。
浮动：
<style>
* {
margin: 0;
padding: 0;
}
.box {
background: red;
width: 200px;
height: 50px;
}
.left {
float: left;
width: 50px;
height: 100px;
background: green;
}
</style>
<div class='box'>
<div class='left'>我是浮动元素</div>
我是浮动元素的父节点
</div>
未浮动
浮动之后
父元素创建BFC
根据上面的代码以及效果图可以得出，left块盒子从未float到float脱离文档流并创建了一个BFC之后，再到box块盒子创建BFC的过程，描述出BFC对浮动的影响。
外边距塌陷：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
margin: 100px;
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
</style>
<div class='box1'></div>
<div class='box2'></div>
未创建BFC
两个相邻的div之间会发生外边距合并的问题，若要解决这个问题这就需要用到BFC，创建新的BFC便能避免这个问题的发生。
<style>
* {
margin: 0;
padding: 0;
}
.box {
overflow: hidden;
}
.box1 {
width: 100px;
margin: 100px;
background: red;
height: 100px;
}
.box2 {
background: blue;
height: 100px;
width: 100px;
margin: 100px;
}
</style>
<div class='box'>
<div class='box1'></div>
</div>
<div class='box'>
<div class='box2'></div>
</div>
创建新的BFC
将它们放到不同的BFC当中，便能解决外边距塌陷的问题。
对于以上这两种css的问题，相信很多人都遇到过，也能解决，但是不清楚为什么会这样，也不知道其含义，但是希望看完这篇文章之后你，我，他都懂了。
网友评论