CSS重点之--BFC（块级格式化上下文）详解

天天有学习
116 阅读3分钟

一.什么是BFC?

MDN原话：块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

通俗的理解

BFC 是一个独立的布局环境，在这个环境中，元素的布局不会影响到外部元素。注意这里是独立的布局环境，html根元素本身也是一个BFC。

什么情况下会触发BFC？

触发BFC的条件有很多，单凭记忆肯定记不住，比如常用的触发BFC的条件有以下几个：

  1. 设置了overflow:hidden的元素
  2. 浮动元素
  3. 绝对定位或固定定位的元素

BFC的使用场景（重点）

1.解决父盒子高度塌陷问题

问题描述：如果父盒子内部包含若干个浮动子盒子，子盒子会脱离标准流，导致父盒子"看不见"子盒子的高度。

可能的疑问：那为什么不给父盒子设置高度呢？ 因为如果给父盒子固定的高度，后续再向其中添加子盒子的时候又得去重新设置父盒子的高度，这样不利于后续的扩展！

解决办法：给父盒子设置一个overflow:hidden，触发BFC使得它成为一块独立的渲染区域。在BFC中，浮动元素会参与计算其父元素的高度。这是清除浮动的常用方法。

2.实现两栏布局

两栏布局是什么：一边宽度固定，另一边宽度自适应。

BFC实现两栏布局原理：触发BFC的盒子会自动避开浮动盒子。

有一个坑：两栏之间的margin只能通过浮动盒子来设置！！！

测试代码如下
HTML部分
          <div class="leftPart"></div>  
          <div class="contentPart"></div>
CSS部分
            .leftPart {
                background-color: #867070;
                height: 50px;
                width: 50px;
                float: left;
                margin-right: 10px;
              }
              .contentPart {
                overflow: hidden;
                height: 50px;
                background-color: #d5b4b4;
                margin-left: 10px; 
              }

3.BFC解决外边距塌陷的问题

外边距塌陷是什么： 当两个垂直方向上相邻的块级元素的外边距相遇时，它们会合并为一个外边距。这个合并后的外边距的大小等于两个外边距中较大的那一个。

通俗解释：两个嵌套关系的块盒，Box1是父盒子，Box2是子盒子，两者均设置margin-top，那么实际的margin会取两者中大的那一个。

BFC解决原理：通过给父盒子设置BFC,使得子盒子和父盒子处于不同的BFC(子盒子位于父盒子的BFC，父盒子可能处于HTML根元素的BFC)。使得两者形成独立的渲染区域。就不会出现外边距塌陷的问题了。

可能的疑问: 如果两个兄弟盒子之间出现margin合并呢？

比如两个兄弟盒子（top）和（bottom）的上边距和下边距都设置了值，但是会取较大的一个，也就是发生了外边距塌陷，这个时候的解决办法就是给一个盒子使用div包裹，然后给这个div一个overflow:hidden，触发BFC，这样top和bottom两个盒子处于不同的BFC，不会出现外边距塌陷的问题。

测试代码如下
     HTML部分
      <div class="container">
        <div class="content1"></div>
      </div>
      
      CSS部分
      .container {
        /* overflow: hidden; */
        height: 300px;
        width: 500px;
        background-color: #a4bc92;
        margin-top: 30px;
      }

      .content1 {
        height: 100px;
        width: 200px;
        background-color: #ddffbb;
        margin-top: 10px;
      }

第一次写博客，可能内容和排版都不是很好，后续会不断完善~

avatar
文章
阅读
粉丝