从头开始复习css之BFC

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

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

一、 什么是BFC？

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

1.1、 w3c对BFC的解释

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

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

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

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

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

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

1.2、 w3c对BFC的解释

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

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

// 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属性的时候效果如下：

这里有这么个东西值得大家注意的，如果我在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;
}
复制代码

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

三、 重新梳理浮动的作用：

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

说在最后

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

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

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