前端知识

[TOC]

七、BFC

1. 关于 BFC 的描述

1.1 CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

1.2 MDN 对 BFC 的描述

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

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

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

1.3 张鑫旭对 BFC 的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

2. 触发 BFC 的条件

下列方式会创建块格式化上下文：

1、简记版：

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

全部情况：

  • 文档的根元素（<html>）。
  • 浮动元素（即 float 值不为 none 的元素）。
  • 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
  • 行内块元素（display 值为 inline-block 的元素）。
  • 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
  • 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
  • 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
  • overflow 值不为 visible 或 clip 的块级元素。
  • display 值为 flow-root 的元素(flow-root：最新属性， 让DIV标签触发BFC，而没有其他任何副作用)。
  • contain 值为 layout、content 或 paint 的元素。
  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

3. BFC 特性/功能

  1. 我不知道什么是 BFC
  2. 但是你写出样式，我就知道这是不是 BFC

BFC 就是这样的东西（堆叠上下文也是）

  1. 它没有定义
  2. 它只有特性/功能

3.1 功能1： 爸爸管儿子：父元素包住所有子元素

用 BFC 包住浮动元素。(可以达到清除浮动的效果，但是不是清除浮动，.clearfix 才是清除浮动）

<body>
  <style>
    .dad { border: 5px solid; overflow: hidden; }
    .son {
      height: 150px; width: 300px; background: red;
      float: left;
    }
  </style>
  <div class="dad">
    <div class="son"></div>
  </div>
</body>
<!-- http://js.jirengu.com/xumij/1/edit -->

还有：

BFC会包含所有的子元素， 如果子元素中有BFC，那么久只包含到这个子元素， 子元素BFC里面有子元素自己去管。（MDN）

<body>
  <style>
    .dad { border: 5px solid; position: absolute; }
    .son {
      height: 250px; width: 400px; background: red;
      float: left; margin-top: 50px; height: 100px;
    }
    .grandson {
      height: 100px; width: 200px; margin-top: 100px; background: green;
    }
  </style>
  <div class="dad">
    <div class="son">
      <div class="grandson">11</div>
    </div>
  </div>
</body>
<!-- http://js.jirengu.com/xumij/3/edit -->

效果：

+-----------------------------------+
|                              dad  |
+---------------------------+       |
||  son                     |       |
|---------------------------+       |
|-----------------------------------+
+----------------------+
|     grandson         |
+----------------------+

3.2 功能2： 兄弟之间划清界限：两个BFC之间划清界限

BFC会和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。BFC会自动填满除去浮动内容以外的剩余空间，这就是自适应布局。

用 float + div 做左右自适应布局

<body>
  <style>
    .one {
      border: 1px solid red;
      margin-right: 20px;
      width: 100px;
      height: 300px;
      float: left;
    }
    .two {
      border: 1px solid;
      height: 300px;
      overflow: hidden;
    }
  </style>
  <div class="one">float 元素</div>
  <div class="two">BFC 元素</div>
</body>
<!-- https://jsbin.com/quguqeq/2/edit?html,output -->

这里想要在两个元素有间距，在BFC中加margin-left需要大于100px才会生效，要么在float元素中加margin-right。

3.3 功能三： 阻止margin合并

<body>
  <style>
    .dad { outline: 5px solid; overflow: hidden; }
    .son{ height: 150px; border: 5px solid red; margin-top: 100px; }
  </style>
  <div class="dad">
    <div class="son"></div>
  </div>
</body>
<!-- https://jsbin.com/fayoqoj/1/edit?html,output -->

如何回答面试官

  1. 千万别解释什么是 BFC，一解释就错
  2. 用上面的例子回答什么是 BFC
Edit this page
Last Updated: 6/4/2024, 8:18:43 PM

← CSS3新属性介绍 →