【前端知识之CSS】BFC

【前端知识之CSS】BFC

一、BFC介绍

BFC(Block formatting context)全称块级格式化上下文，在官方文档当中是这样解释的：

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

官方文档的解释可能看起来晦涩难懂，这里我给大家提供我的理解以供参考:

BFC可以看作一个独立布局的分隔空间，其中进行的页面布局是不会遭受标准流页面布局的干扰，并且在一个单独BFC当中，所有的行内元素和块元素都会沿着自身父盒子边框排列。

二、BFC如何触发

以下是我常用来触发BFC的几种方式

• float: 值不为none(常用值为left、right)
• position：除了默认值和相对定位(relative)
• disiplay: inline-block、table-cell、flex、table-caption、inline-flex 其中行内块元素和flex为最常用的属性值
• overflow:hideen、scroll、auto (除了visible其他的属性)

三、BFC的作用

我自己在网页布局中用到BFC的几个点分别是：

• margin重合: 上下相邻的两个盒子的margin-top和margin-bottom发生重合
• margin塌陷: 父元素和子元素同时设置margin-top属性或者单独给子元素设置margin-top就会导致子元素没有margin-top的效果。
• 高度塌陷: 父元素不设置高度，子元素设置了浮动属性后，父元素的高度会变为0

1.margin重合

  .box1 {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
​
  .box2 {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  
  
  <hr>
  <div class="box1"></div>
  <div class="box2"></div>

会出现该图的上下盒子margin合并导致间距只有20px 解决方法：给其中一个盒子添加一个div包裹并触发BFC

.box {
    overflow: hidden;
  }
​
  .box1 {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
​
  }
​
  .box2 {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: pink;
​
  }
  
<div class="box1"></div>
<div class="box">
  <div class="box2"></div>
</div>

效果如下 可以明显的看到盒子之间的margin分离开了

2.margin塌陷

  .father {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin-top: 50px;
  }
​
  .son {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 20px;
  }
  
  <hr>
  <div class="father">
    <div class="son"></div>
  </div>

可以看出子元素设置的margin-top没有生效 解决方法：使父盒子触发BFC

 .father {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin-top: 50px;
    overflow: hidden;
    /* float: left; */
    /* display: flex; */
  }

可以看出图中子盒子有了20px的margin-top

3.高度塌陷

 .father {
    width: 100px;
    background-color: skyblue;
  }
​
  .son1 {
    width: 50px;
    height: 100px;
    background-color: pink;
    float: left;
  }
​
  .son2 {
    width: 50px;
    height: 100px;
    background-color: #ccc;
    float: left;
  }
  
  <hr>
  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>

由下图可以看出图中的父元素高度并未被子元素撑开 解决方案：与解决margin塌陷一致，使父元素触发BFC 从图可以看出父盒子高度被子盒子撑开。

四、总结

BFC的用途文中只提到了几个常见问题，相信还有很多用法等着各位小伙伴们一起去发掘哦~~~