CSS8:到底什么是BFC？

wyk1184 发布于2019-08-29 17:08 / 2467人阅读

摘要：两个兄弟盒之间的竖直距离由属性决定。即使存在浮动尽管一个盒的行盒可能会因为浮动收缩，这也成立。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

现在有flex布局等新技术，bfc的效果比如包住元素，进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC！

看不懂的定义 CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

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

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

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

MDN 对 BFC 的描述

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

张鑫旭对 BFC 的描述

http://www.zhangxinxu.com/wor...

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

看不懂定义！记不住定义！举例回答BFC

不要试图记忆他的定义。
应该举例回答：

功能1：爸爸管儿子

用 BFC 可以包住浮动元素。(这不是清除浮动，.clearfix 才是清除浮动）

例如如果儿子浮动了，那么爸爸包不住儿子，只有BFC才可以包住儿子。例如设置爸爸为float：left就包住了儿子。什么才算一个bfc？定义里bfc写的

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

现在有点理解定义了

.baba{
  border: 10px solid red;
  min-height: 10px;
 display: flow-root; /* 只触发BFC  */
  /* display: float;*/ /*触发BFC */
  /* position: absolute; *//*触发BFC */
/*  display: inline-block; 触发BFC */
  /*  overflow:auto; 触发BFC */
/*  display:table-cell;触发BFC */
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

display: flow-root; /* 触发BFC  */
  /* display: float;*/ /*触发BFC */
  /* position: absolute; *//*触发BFC */
  /*  display: inline-block; 触发BFC */
  /*  overflow:auto; 触发BFC */
  /*  display:table-cell;触发BFC */

上面几个属性都会触发BFC

存在一个问题：元素变成BFC之后，还会出发其他效果，比如position: absolute;会绝对定位。解决问题的方法就是使用display: flow-root;，它只有一个效果，让当前元素变成BFC。没有副作用。
http://js.jirengu.com/winozoc...

还有一个作用，课可以归功于爸爸管儿子，如果一个div不是bfc，他其中的子元素的margin-top和margin-bottom会伸到父div外面。
例子：

爸爸和儿子一样高，没有受到外边距影响。

变成BFC之后：

外边距也算了进去。

这个问题buyongbfc也可以解决，margin无法穿透border，只需要加一个border-top，margin就在.baba内部了。
可见没有任何情况完全需要BFC。

总结一下BFC功能1：一旦一个元素有上面那几个属性，那么他就是一个BFC，BFC会把内部的元素包起来，不管内部元素是否浮动。且内部元素的边距也不会突破这个父BFC的范围。

功能2：兄弟之间划清界限

既：让两个相邻的BFC界限分明。
举个例子：
两个div是是兄弟关系，把哥哥浮动了，那么哥哥会叠在弟弟上面，会遮盖弟弟。这时候如果把弟弟也变成BFC，那么哥哥和弟弟之间就会界限分明，谁都不会遮挡谁。
例子如下：

http://js.jirengu.com/woduniq...

总结BFC功能

内部元素完全包起来（float等），外部元素界限分明，不重叠。

面试官问的时候就说：

首先一个BFC可以包住浮动元素，不让他超过边界（但这不是清除浮动，清除浮动用clearfix），即使是子元素的margin也可以包住，不冲出父元素。比如举一个代码的例子，儿子是浮动元素，那么只要在爸爸上写overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那么爸爸就会包住儿子，且margin也会在爸爸里面）

一个浮动元素会和另一个不是浮动的元素重叠，浮动元素会浮在两一个元素上面，如果把另一个元素写成bfc，那么这两个元素就不会互相重叠。

记录一下上下margin合并问题

注释：只有普通文档流中  块框 的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。值为大的边距。

既：两个块级元素一般情况下上下边距会合并，行内元素，浮动元素，绝对定位之后不会合并。
http://js.jirengu.com/rihoxab...

云服务器 GPU云服务器前端到底是什么云计算到底是什么 python到底是什么 php到底是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114129.html

BFC到底是啥？

摘要：两个兄弟盒之间的竖直距离由属性决定。即使存在浮动尽管一个盒的行盒可能会因为浮动收缩，这也成立。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。前言在面试中，我们经常会遇到一个常见的面试题，什么是BFC?于是我就去查阅了相关资料： css规范中是这样描述BFC的 9.4.1 块格式化上下文浮动，绝对定位元素，...

jeffrey_up 2019-08-30 15:44 评论0 收藏0
CSS: 潜藏着的BFC

摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 评论0 收藏0
重新定义BFC

摘要：大家花秒的时间组织组织语言，给下个定义，看看咱们的想法是不是一致的，哈哈。先给BFC下个定义 CSS里的BFC可真的是一个老生长谈的问题，网上的资料很多，介绍的也很详细，但是看完之后，还是不知道BFC到底是个啥东西，似懂非懂，它到底是个标准呢，还是一套约定俗成的编码规范呢，A和B两个DIV，BFC化到底指的是A还是指的是B呢。大家花5秒的时间组织组织语言，给BFC下个定义，看看咱们的...

harryhappy 2019-08-29 13:07 评论0 收藏0
CSS：BFC 最熟悉的陌生人

摘要：就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。最常见的有和，中还增加了和，这里就不深入研究了。其根本原理就是它们处于同一个，符合属于同一个的两个相邻元素的会发生重叠的规则。 BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是...

focusj 2019-08-29 13:28 评论0 收藏0
CSS魔法堂：你一定误解过的Normal flow

摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。前言刚接触CSS时经常听到看到一个词文档流，那到底什么是文档流呢？然后会看到绝对定位和浮动定位能脱离文档流，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolu...

Hancock_Xu 2019-08-30 12:56 评论0 收藏0