BFC，块格式化上下文（Block Formatting Context，BFC）是个啥？我们来看下MDN的解析：
看完上面一大段，你会知道，哦，原来BFC就是块格式化上下文啊，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
但是看完以后你会发现，你只记住了一个块格式化上下文。。。
照我的理解，不用刻意去记或者说是去解释什么是BFC，可以简单的理解为就是页面中的一部分或者说是一块区域。然后就是要知道，怎么去创建这块区域，以及这块区域有什么作用就行。
怎么创建这块区域
创建的方法呢，mdn里也说了一大推，但是会用到或者说比较常用的有：
- 根元素
<html>，这没毛病吧，每个页面都有。。。 - float＝left|right 或 inherit
- position 为 absolute 或 fixed
- display＝inline-block|flex|inline-flex
- overflow＝hidden|auto 或 scroll(≠visible)
有什么用
MDN提到了两点，一个是清除浮动，一个是清除外边距塌陷。你要说为什么会有这样子的作用，网上找了相关的资料，解释是，BFC有几个特性或者说是布局规则：
- 内部的Box会在垂直方向进行排列，这里的box就是块级元素。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（垂直方向）。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
这里按照我的理解解释一下为什么BFC会引起塌陷也能解决塌陷： 比如一个没有设置高度的div，他的父盒子也是一个没有设置高度的div，div的子元素p设置了高度，这时候两个div都会被p给撑开。p如果设置了浮动，自然父盒子的高度就会塌陷，这时候如何在div也设置了浮动，那么p浮动造成的高度塌陷，但是又会引起div父盒子的高度塌陷。
对BFC有其他的见解、疑问或者文章有什么错误的地方，都可以在评论区进行讨论。
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
