在一个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其实不算一个很难的内容,但实际上还是有一些应用场景的,并且在求职过程中属于许多公司喜欢去考察的点,它主要涉及的内容也就是上面这些,只要你能理解,基本也就没什么问题了。