乐趣区

关于前端:CSS笔记1BFC

jiezi

1. 前言

上图是本文整顿的与 BFC 无关的思维导图。上面将一一介绍上图中呈现的所有概念。

2. 注释

2.1 Formatting Context

它是页面中的一块渲染区域，并且有一套渲染规定，它决定了其子元素将如何定位，以及和其余元素的关系和相互作用。包含 BFC 和 IFC。

2.2 BFC 简略印象

BFC 全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦个性什么的，一言难尽，大家能够自行去查找，我这里不详述，省得乱了主次，总之，记住这么一句话：BFC 元素个性体现准则就是，外部子元素再怎么排山倒海，反复无常都不会影响内部的元素。所以，防止 margin 穿透啊，革除浮动什么的也好了解了。

摘自张鑫旭的文章：https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

2.3 BFC 和 IFC 布局规定

BFC：

  1. 外部的 Box 会在垂直方向，一个接一个地搁置。
  2. Box 垂直方向的间隔由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠
  3. 每个元素的左外边缘（margin-left)，与蕴含块的右边（contain box left）相接触(对于从左往右的格式化，否则相同)。即便存在浮动也是如此。除非这个元素本人造成了一个新的 BFC。
  4. BFC 的区域不会与 float box 重叠。
  5. BFC 就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素。反之也如此。
  6. 计算 BFC 的高度时，浮动元素也参加计算

IFC：

在行内格式化上下文中，框 (boxes) 一个接一个地程度排列，终点是蕴含块的顶部。程度方向上的 margin，border 和 padding在框之间失去保留。框在垂直方向上能够以不同的形式对齐：它们的顶部或底部对齐，或依据其中文字的基线对齐。蕴含那些框的长方形区域，会造成一行，叫做行框。

以上均摘自：https://segmentfault.com/a/1190000009545742（作者参考了 W3C 文档）

2.4 如何创立 BFC

  1. 根元素或其它蕴含它的元素
  2. 浮动 (元素的 float 不是 none)
  3. 相对定位的元素 (元素具备 position 为 absolute 或 fixed)
  4. 非块级元素具备 display: inline-block，table-cell, table-caption, flex, inline-flex
  5. 块级元素具备overflow，且值不是 visible

摘自：https://segmentfault.com/a/1190000009545742（作者参考了 W3C 文档）

2.5 BFC 的利用

  1. 革除浮动：解决父元素高度塌陷问题；
  2. 布局：自适应两栏布局；
  3. 避免垂直 margin 合并：解决外边距合并问题。

具体的例子能够参考：https://segmentfault.com/a/1190000009545742

3. 参考资料

[1] CSS 深刻了解流体个性和 BFC 个性下多栏自适应布局 https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

[2] BFC 与 IFC 概念了解 + 布局规定 + 造成办法 + 用途 https://segmentfault.com/a/1190000009545742

[3] 什么是 BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187

1.

退出移动版