CSS学习（5）BFC

走马Ricardo
113 阅读4分钟

前言

  • 介绍BFC及其应用
  • 介绍BFC、IFC、GFC和FFC

各种FC

我们先看BFC，后面的其他FC就通了。

BFC 英文全称为 Block formatting context ，翻译成中文是“块级格式上下文”。

简单来说，就是页面中的一块渲染区域，并且有一套属于自己的为渲染规则，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

再简短一点，那就是：BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

当然，虽然说BFC是一个独立的布局环境，里外不影响，但也不是意味着布局没有章法，基本的规矩还是要有的。

例如，BFC的布局规则有如下几条：

  1. 内部的Box会在垂直方向一个接着一个地放置。
  2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
  3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是是如此。
  4. BFC的区域不会与浮动Box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  6. 计算BFC的高度时，浮动子元素也参与计算。

我们看到这六条规则时往往会有一个直观的感受，好像在我们的body元素里面，盒子天然就是这样的布局规则呀?

没错，实际上在一个标准流中body元素就是一个天然的BFC。

那么如果我想单独设置成一个BFC，该怎么办呢？这里记录了一些常见的方式：

元素或属性属性值
根元素
floatleft、right
positionabsolute、fixed
overflowauto、scroll、hidden
displayinline-block、table-cell

更多参考developer.mozilla.org/zh-CN/docs/…

接下来我们来探讨BFC的作用，我们来看下面几个场景：

  1. 解决浮动元素令父元素高度坍塌的问题
<div class="father">
  <div class="son"></div>
</div>

  .father {
    border: 2px solid red;
    overflow: hidden;
  }
  .son {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
  }

20240708-184808.gif

可以看到，子元素设置了浮动后，脱离了标准流，父元素高度坍塌。这时，给父元素增加overflow: hidden后，将父元素设置成一个BFC，那么父元素高度再次被子元素撑开了。

  1. 非浮动元素被浮动元素覆盖
<div class="one"></div>
<div class="two"></div>

  .one {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }
  .two {
    width: 300px;
    height: 100px;
    background-color: blue;
    overflow: hidden;
  }

20240708-185710.gif

可以看到，one元素设置了，脱离了标准流，将two元素覆盖。这时，给two元素增加overflow: hidden后，将two元素设置成一个BFC，那么two元素不会被one元素覆盖了。

  1. 解决外边距垂直方向重合的问题
<div class="one"></div>
<div class="two"></div>

  .one {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-bottom: 20px;
  }
  .two {
    width: 300px;
    height: 100px;
    background-color: blue;
    margin-top: 20px;
  }

image.png

可以看到margin重叠了，接下来修改代码

<div class="one"></div>
<div class="main">
  <div class="two"></div>
</div>

  .main {
    overflow: hidden;
  }

image.png

明白了BFC，那么其他的FC，IFC、GFC、FFC也就大同小异了。

  • IFC (Inline formatting context)：翻译成中文就是"行内格式化上下文"，也就是一块区域以行内元素的形式来格式化
  • GFC (GrideLayout formatting contexts)：翻译成中文就是"网格布局格式化上下文"，将一块区域以grid网格的形式来格式化
  • FFC(Flex formatting contexts)：翻译成中文就是"弹性格式化上下文"，将一块区域以弹性盒的形式来格式化

更多参考 developer.mozilla.org/zh-CN/docs/…

总结

  • 介绍BFC及其应用

所谓BFC，块级格式上下文，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

触发BFC的方式有很多，常见的有:

  • 设置浮动
  • overflow设置为auto、scroll、hidden
  • positon设置为absolute、fixed

常见的BFC应用有:

  • 解决浮动元素令父元素高度坍塌的问题
  • 解决非浮动元素被浮动元素覆盖问题
  • 解决外边距垂直方向重合的问题
  • 介绍BFC、IFC、GFC和FFC
  • BFC：块级格式上下文，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。
  • IFC：行内格式化上下文，将一块区域以行内元素的形式来格式化。
  • GFC：网格布局格式化上下文，将一块区域以grid网格的形式来格式化。
  • FFC：弹性格式化上下文，将一块区域以弹性盒的形式来格式化。
avatar
文章
阅读
粉丝