在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
今天我就想和大家分享下我对BFC，即块级格式化上线文的理解，如果你对上面的内容感觉熟悉，那说明你感觉是对的！因为上面的内容我是我从别处引用过来的，因为标准化的理解向来不是我所擅长的，但讲这个内容我觉得先看一下标准概念会好一些。
我先谈下我对BFC的理解，我将之理解为一种特殊的布局方式，这种布局没有单独定义出实现方式，但可以在一些特殊情况下触发，并且产生一些特殊性质。
大概概念上我觉得是这个样子，我的理解可能会存在偏差，但我觉得大家看一下，能有所收获，特别是有自己的理解那就最好了。接下来我在给大家介绍下上面提到的特殊情况和特殊性质。
1，特殊情况，即如何产生
BFC产生的条件，其实就是将上面所提到的定义看懂就应该明白了，具体下来是以下几点：
- overflow不为visible的块级盒子。
- 非块级元素的块级容器，即通过display来实现的，上面有提到一些例子，大家看了应该基本就懂了。
- 浮动元素和绝对定位元素，即float属性不为none或者position属性为absolute、fixed的元素。
2，特殊性质，即什么作用
至于BFC有什么作用呢？也就是有那些性质，我们一般有用来处理一些什么问题，在大多数文章总结起来有三个性质：
- 阻止上下边界重合，两个元素的上下边界默认情况下会产生重合，而很多时候我们不需要这种重合，就可以通过BFC来解决。
- 可包含浮动元素，这个属性一般用来清除浮动，关于清除浮动内容很多，我想以后单独谈一下，这里就不多说了。
- 不与浮动元素重合，这个具体用在什么地方没有比较总结性的说法，大多用在一些场景中，这里我确实也说不清楚，大家查阅下别的文章吧。
BFC其实不算一个很难的内容，但实际上还是有一些应用场景的，并且在求职过程中属于许多公司喜欢去考察的点，它主要涉及的内容也就是上面这些，只要你能理解，基本也就没什么问题了。
网友评论