bfc 即为block formatting context 的缩写，bfc 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。
不是所有的元素都能产生bfc的，只有display 属性为 block, list-item, table 的元素，才可以产生bfc。
这点其实根据bfc的主要作用应该可以很形象的理解。“必须表现为一块一块的，才能给出一个隔离的空间“。
光有bfc的潜质，不代表就直接会触发bfc。触发bfc 需要至少满足下列条件中的一条：
正常情况下当父盒子不给出高度时，子盒子的高度会将把父盒子自动撑开来，让父盒子具有高度。
而如果子元素都具有浮动时，父盒子就不会被撑开。这时使父盒子具有bfc属性即可同时计算浮动盒子的高度
我要评论
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
.fa {
width: 200px;
margin: 100px auto;
border: 2px solid red;
background-color: aqua;
}
.fa div {
width: 100px;
height: 100px;
float: left;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.fa .son2 {
border: 2px solid grey;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
在父盒子没有触发bfc时，显示的结果如下
而通过2中的方法，给.fa 添加bfc （例如增加一句overflow: hidden;）效果如下
根据上述的3-（2）所说，bfc内部的相邻的两个盒子的margin值会重叠，那么如果不属于同一个bfc则可以解决这个问题
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
同一个bfc下，.son1的下边距为50px .son2的上边距为100px 按照我们一般想要的结果是，.son1 与.son2 之间的距离为150px；
而实际效果入下：
可以很明显看出，他们之间的距离只有100px，他们的margin重叠了。
如果给.son1 外边在嵌套一个bfc 则 .son1 与.son2，不属于同一个bfc就不会产生这个情况 结果如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.bfc {
overflow: hidden;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="fa">
<div class="bfc">
<div class="son1"></div>
</div>
<div class="son2"></div>
</div>
</body>
</html>
一个父盒子内部有两个子盒子，如果第一个子盒子有浮动，而第二个子盒子没有浮动，则第一个子盒子会盖在第二个盒子上面。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
.fa {
width: 400px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
}
.son1 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
float: left;
}
.son2 {
height: 200px;
border: 2px solid grey;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2">这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字</div>
</div>
</body>
</html>
如果给第二个子盒子（.son2{overflow:hidden}）添加bfc，则第二个盒子会紧贴着浮动盒子的右侧，并且由于第二个子盒子没有宽度，所以他的宽度会自适应剩余大小。
最后，一般设置bfc最常用的就是给盒子加上 overflow: hidden; 因为这样的写法基本上不会对原有的其他样式产生影响。
如对本文有疑问， 点击进行留言回复！！
网友评论