到底什么是bfc?

1、规范解释:块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

2、通俗理解:BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分,需要一定的条件才能触发
(1) 给元素添加浮动,浮动元素就具有BFC特性----
float: left/right;

(2) 给元素添加overflow属性----
overflow: hidden,auto,scroll(除了visible);

(3) 给元素添加display属性----
display: inline-block, flex, inline-flex, table-cell,table-caption;

(4) 给元素添加定位----
position: absolute,fixed

4、bfc特性
(1)内部的Box会在垂直方向,从顶部开始一个接一个地放置
(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加,与方向无关
(3)每个元素的margin box的左边,与包含块border box的左边相接触,即使在浮动元素中也是这样
(4)BFC的区域不会与float box叠加,利用此特性可以实现两列布局,左边固定宽度,右边自适应
(5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,里面的子元素也不会影响到外面的元素
(6)计算BFC的高度时,浮动元素也会参与计算

5、bfc可以解决的问题:
(1) 外边距塌陷的问题:
首先理解何为外边距塌陷?
第一种是父子元素之间的外边距塌陷
第二种是兄弟元素之间的外边距重叠
如果需要详细了解外边距塌陷,请参考以下链接:https://blog.csdn.net/qq_41893334/article/details/90574032

现在主要是思考bfc如何解决此问题:

  • 解决第一种父子元素外边距塌陷的方法是
* {
  margin: 0;
  padding: 0;
  }
.box {
  width: 400px;
  height: 400px;
  background-color: skyblue;
  /* 给.box上触发bfc规范--如使用overflow:hidden */
  overflow: hidden;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 30px;
}

<!-- ps: 我这里只写上主要的代码,写太多会看着很麻烦,如果想要了解更清楚,请主动测试 -->

<div class="box">
  <div class="box1"></div>
 </div>

这样父元素就是一个独立的盒子,不会受到.box1的margin-top的影响

  • 解决第二种兄弟元素之间外边距塌陷的方法是
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 30px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 10px; 
}

<div class="box1"></div>
<div class="box2"></div>

这时就会产生外边距塌陷的问题:
这时外边距会怎么计算呢?
1.两个都是正数,取较大的值
2.两个都是负数,取绝对值较大的值
3.一正一负,取两个值得和

而解决这种外边距重叠的方法就是利用bfc在box2的外边再包装一层box,此box就具有bfc特性,把就不会受到外部margin值的影响

.box-newBFC {
  overflow: hidden;
}

<!-- .box1 和 .box2 的样式与上一样 -->

<div class="box1"></div>
<div class="box-newBFC">
  <div class="box2"></div>
</div>

OK,这里讲的bfc解决外边距塌陷的问题解决。

(2)解决float产生浮动的问题,我们一般会清除浮动,清除浮动有很多种方法,这里我就不一一列举了,而使用over-flow:hidden的方法就是bfc解决浮动的方法。

具体实施就是在浮动元素的父元素上触发BFC,添加一个over-flow:hidden

最后,讲一下使用bfc怎么实现两列自适应布局

     /* 使用bfc规范实现两栏布局,box2 可以自适应宽度 */
    .box {
      width: 300px;
      height: 400px;
      background-color: skyblue;
    }
    .box1 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    } 
    .box2 {
      /* 利用bfc特性bfc区域不会与float-box区域重叠 */
      overflow: hidden;
      height: 200px;
      background-color: blue;
    }``
    
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐