设置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容器其实大部分是为了解决浮动布局所引起的问题，另外一种说法就叫清除浮动。浮动布局常见于一些PC端门户网站，因为任职的公司主要是写移动端H5，常用的flex布局、定位这些无意间已经是在创建BFC，而且基本上没有用到浮动，所以对这块知识是比较模糊的。不过概念还是得捋清楚，面试好像挺喜欢问关于这个BFC的问题。
以上就是设置BFC功能及使用示例详解的详细内容，更多关于BFC 设置使用的资料请关注脚本之家其它相关文章！
相关文章
JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析
这篇文章主要介绍了JS中类的静态方法，静态变量，实例方法，实例变量区别与用法,结合实例形式详细分析了JS中类的静态方法，静态变量，实例方法，实例变量相关功能、使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
实际参数在函数中我们可以使用 arguments 对象获得 （注：形参可通过 arguments.callee 获得），虽然 arguments 对象与数组形似，但仍不是真正意义上的数组。2010-01-01
位运算,那些看似晦涩但又蕴含无限魔力的数字魔术,在JavaScript开发中扮演了默默无闻却又至关重要的角色,本文介绍多个js位运算的使用场景,阐述在JavaScript中,如何巧妙运用位运算实现效率的提升和算法的优化,需要的朋友可以参考下2023-12-12
本篇文章主要是对js中opener与parent的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JavaScript实现为事件句柄绑定监听函数的方法,结合实例形式分析了javascript事件绑定的常用技巧与注意事项,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了JS小游戏之仙剑翻牌源码,是一款比较经典的卡牌类游戏,对于javascript游戏设计有不错的借鉴价值,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了小程序如何支持使用 async/await详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于JavaScript中分号的一些细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
javascript 随机抽奖程序代码,主要是利用了js的Math.random方法。需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了50行代码实现Webpack组件使用次数统计,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论