导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

完整名称：（块级格式化上下文）「block formatting context」

定义

BFC 是 CSS 中页面的一块独立渲染区域，内部元素的渲染遵循特定规则，与区域外部的元素相互隔离。

触发条件

特点

  1. 同一个 BFC 内部的盒子会按照正常文档流一个接一个地放置。
  2. BFC 内部的元素垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻元素的 margin 会发生重叠。
  3. BFC 的区域不会与浮动盒子重叠。
  4. BFC 是一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之亦然。

作用

1.清除浮动

计算 BFC 的高度时，自然也会检测浮动或者定位的盒子高度。

只要把父元素设为 BFC 就可以清理子元素的浮动了，最常见的用法就是在父元素上设置 overflow: hidden 样式，对于 IE6 加上 zoom: 1 就可以了。

原理：

通过创建 BFC，浮动元素不再影响 BFC 的元素布局，解决了浮动元素导致的文字环绕问题。

image.png

2.解决 margin 上下合并 问题

盒子垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠

属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠，那么我们创建不属于同一个 BFC ，就不会发生 margin 重叠了。

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .green { background-color: green; }
      .blue { background-color: blue; }
      .red { background-color: red; }
      .w100 { width: 100px; }
      .h100 { height: 100px; }
    </style>
  </head>
  <body>
    <div class="container green" style="height: 500px">
      <div class="blue w100 h100" style="margin-bottom: 20px"></div>
      <div class="red w100 h100" style="margin-top: 20px"></div>
    </div>
  </body>
</html>

<div class="container green" style="height: 500px;">
    <!-- 给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠 -->
    <div style="overflow: hidden;">
        <div class="blue w100 h100" style="margin-bottom: 20px;"></div>
    </div>
    <div class="red w100 h100" style="margin-top: 20px;"></div>
</div>

3.解决 margin 内外合并 问题

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin: 0 auto;
    }
    .green {
      background-color: green;
    }
    .mt-1 {
      margin-top: 100px;
    }
    .container {
      width: 200px;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box green mt-1"></div>
  </div>
</body>
</html>

Untitled

非 bfc 解决办法 - 1像素上边框

.container {
  border-top: 1px solid transparent; /* 1像素边框 */
  width: 200px;
  background-color: #000;
}

Untitled

触发 bfc 解决办法

.container {
  width: 200px;
  background-color: #000;
  overflow: hidden;
}

4.制作右侧自适应的盒子问题

普通流体元素 BFC 后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

Untitled

<div class="container" style="height: 300px; background-color: red;">
	<div style="width: 100px; height: 100px; float: left; background-color: blue;"></div>
	<div style="overflow: hidden; background-color: green;">我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容</div>
	<!-- 给右侧div添加 overflow: hidden即可 -->
</div>

注意：给第一个子元素div设置浮动后， 会导致第二个子元素 div 被 float 了的第一个子元素 div 覆盖，而里边的文本却不会被 float 覆盖，是因为 float 当初设计的时候就是为了使文本围绕在浮动对象的周围。