设置BFC功能及使用的方法是什么

这篇文章主要讲解了“设置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功能及使用的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！