这篇文章主要讲解了“设置BFC功能及使用的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“设置BFC功能及使用的方法是什么”吧！
首先BFC是啥？
官方描述：块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
额......
是的，正常人看完还是不知道BFC是啥。
我用人类的语言尝试翻译一下：BFC就是一个就是一个容器。只不过这个容器里面元素怎么布局都不会影响外面的元素，外面的元素同样也影响不到这个盒子里面的元素。
不设置BFC会对网页布局有怎么样的影响？
.box1 {
width: 400px;
border: 10px solid pink;
}
.c-box1 {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
.c-box2 {
width: 200px;
height: 200px;
background-color: blueviolet;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
}
<div class="box1">
<div class="c-box1">
</div>
<div class="c-box2">
</div>
</div>
<div class="box2"></div>
由于box1没有设置高度，box1里面的元素设置浮动后，无法将其撑起，从而影响到了外面的box2。那么如果box1是一个BFC的话，那么效果就会如下图一样：
给box1加上 overflow: hidden;没错这就是让一个容器形成BFC的一种方式。
.box1 {
width: 400px;
border: 10px solid pink;
overflow: hidden;
}
啊？就就就......就这？那么你肯定想问这个BFC还有其他作用吗？
BFC还有啥作用？
- 解决盒子高度塌陷的问题
没错，也就是上面那种情况。
- 解决盒子margin塌陷的问题
.box1 {
width: 100px;
height: 100px;
background-color: purple;
margin-bottom: 30px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
<div class="box1"></div>
<div class="box2"></div>
盒子垂直方向的margin是存在塌陷问题，box2设置的10px向上的margin没起作用。所以，把box1和box2变成一个BFC就可以解决这个问题。
- 可以防止元素被相邻的浮动盒子覆盖
.box1 {
float: left;
width: 150px;
height: 200px;
background-color: purple;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
<div class="box1"></div>
<div class="box2"></div>
这种情况，除了可以box2设置overflow: hidden; 还可以设置float: left。
没错，上面一直用使用overflow: hidden来设置BFC,其实设置浮动也是一种形成BFC的方式。那么还有没有其他方式？答案是肯定的。
都有哪些方式来创建BFC
- 设置浮动，不管是左浮动还是右浮动都可以，float属性值不是none即可
- 设置定位，position的值不是static或者ralative
- 设置display，display的值是inline-block、flex或者inline-flex
- overflow值不为 visible，为 auto、scroll或者hidden
感谢各位的阅读，以上就是“设置BFC功能及使用的方法是什么”的内容了，经过本文的学习后，相信大家对设置BFC功能及使用的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是本站，小编将为大家推送更多相关知识点的文章，欢迎关注！
