从头开始复习css之BFC

夏天快到了，又到了白大腿横飞的时代。坐下来摸了摸腰间残留的今年五花肉就忽然以为时光待我并不怎么宽厚啊。

昨天写了一篇关于浮动的文章,里面就提到了BFC 并介绍了几种利用BFC来清除浮动的方式，那么今天来解答一下：到底什么是BFC？

1、 什么是BFC？

其实你叫我单纯的回答大家什么是BFC，我只能告诉你BFC的全称（Block Fromatting Context）和中文翻译名（块级格式化上下文）。若是你叫我深刻的解释这这个名词，这就比如你叫我来解释什么叫男生/女生同样，你们我都知道这两个名词，可是你叫人跟你解释清楚倒是很麻烦，一样bfc也是如此。

1.一、 w3c对BFC的解释

首先咱们来看看W3C对BFC的解释

我在这里简单的翻译一下：（可能不怎么标准呀）

浮动元素、绝对定位元素等非快级盒子的快级容器（例如：inline-blocks, table-cells, 和 table-captions），以及overflow属性不为visiable的块级元素元素，都会其内容创建新的块级格式化上下文。

在BFC（块级格式化上下文）中，盒在垂直方向一个一个的放置，从包含块的顶部开始，相邻的兄弟盒子之间的垂直距离由margin属性来决定，在同一个BFC（块级格式化上下文）中的相邻兄弟之间的margin会被合并。

在一个BFC（块级格式化上下文）中，最左边的左边距和包含块的左边相同（对于从右向左格式的结构，内外也是挨着的）。即便存在浮动状况（尽管盒子的大小可能由于内部子盒子的浮动而变窄），这也成立，除非子盒子内创建了一个新的BFC（块级格式化上下文）,这种状况下，该盒自身可能由于浮动变窄。

讲道理,不知道是否是我翻译的缘故，我硬是没看懂orz！ 算了咱们仍是来看一下中文版MDN对BFC的解释吧：

1.二、 w3c对BFC的解释

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

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

• 根元素或包含根元素的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 strict 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会建立一个新的BFC，即便该元素没有包裹在一个多列容器中（标准变动，Chrome bug）。 块格式化上下文包含建立它的元素内部的全部内容.

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

2、用代码来解释上面懵懂的话语吧

其实上面找了这么多文档，其实大抵仍是不怎么懂的，可是咱们就来按照他们的说法来写点点代码，来看下面一段代码：

// html
<div class="parent">
  <div class="son"></div>
</div>
// css
*{
  margin: 0;
  padding: 0;
}
.parent {
  width: 200px;
  border: 10px solid pink;
  margin:100px;
}
.son {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
复制代码

效果以下：

这里咱们发现因为子元素添加了浮动属性，致使父元素的宽度并无被撑开。那咱们按照文档的说法，来作一下简单的实验：

.parent {
  width: 200px;
  border: 10px solid pink;
  margin:100px;
  /*overflow: hidden;*/
  /*display: inline-block;*/
  /*display: flex;*/
  /*display: flow-root;*/
  /*position: absolute;*/                      
  ...
}
复制代码

这里咱们发现了一个状况：即便是子元素添加了浮动属性，父元素都会被子元素撑开。这里咱们就差很少能明白前面W3C的第一段话，使用上面一系列的属性能让父盒子产生BFC，我在这里总结一下BFC的功能，就是让父盒子包裹起子盒子来，也就能够达到清除浮动的功能。

而后咱们在代码的基础上增长一个儿子来继续探究BFC的做用：

// html
<div class="parent">
  <div class="son"></div>
  <div class="son1"></div>
</div>
// css
.son {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.son1 {
  width: 100px;
  height: 100px;
  background: blue;
  display: flow-root;
}
复制代码

首先在son1中不添加display属性的时候效果以下：

此时咱们发现因为son盒子是浮动的不占据位置，此时son1就会霸占son在父盒子的位置产生上面覆盖的效果。 而后咱们加入display属性的时候效果以下：

由上面的对比效果咱们能够明显的发现： 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。而且相邻BFC盒子不会重叠

这里有这么个东西值得你们注意的，若是我在son1盒子上面增长一个margin-left的属性，咱们发现并无效果，直到margin-left的长度大于son盒子的时候才会产生偏移。

可是若是在son上面加一个margin-right的属性：

从上面这两个例子能更清楚的说明相邻BFC盒子不会重叠的特性。

紧接着咱们来继续的探究一下垂直margin合并的问题，修改一下上面的代码：

.son {
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}
.son1 {
  width: 200px;
  height: 100px;
  background: blue;
  margin: 20px;
}
复制代码

从面的效果能够发现咱们就能够很清楚的能够发现： 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻子盒子的margin会发生重叠

若是想清除这种重叠效果，能够在son1的外层套一个盒子(穿上一件马甲)，就像这样：

3、 从新梳理浮动的做用：

一、 自适应两栏布局 二、 清除内部浮动 三、 防止垂直 margin 重叠 总而言之：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

说在最后

今天在最后想说一下关于使用BFC特性的问题。咱们都知道CSS有一个不正交的特别。一般来讲：一个属性并非由于单独某个效果而设计的，可能某个属性会有各类不一样的效果。怎么理解？例如：overflow：hidden属性，他不仅仅只是产生了BFC的效果，他还有一些额外的做用：当子盒子的长/宽大于父盒子的时候，就会将溢出的子元素内容给隐藏掉。若是咱们单单只想要BFC特性的话，要选用适合场景的属性。

可能官方看到咱们这些底层程序员的呼声，推出了display：flow-root属性，这个是专门用来生成BFC的，但因为这个属性比较新，不少浏览器都不能完美的支持，使用的适合也要谨慎当心。

说了这么多，只是想让诸位看官在开发里面要大胆使用，仔细验证，在项目条件支持的角度下 多去使用新的知识，毕竟时代是在不断进步的，咱们也要不断更新本身的知识储备。好了，也已通过了12点了，睡觉去了。