设置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的问题。

作者:傻小子

%s 个评论

要回复文章请先登录注册