CSS中重要的BFC

html-css025

CSS中重要的BFC,第1张

CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。

在解释BFC之前,先说一下文档流。我们常说的文档流其实分为 定位流 浮动流 普通流 三种。而普通流其实就是指BFC中的FC。FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。

BFC (Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域。[MDN上的解释]:BFC是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

注意:一个BFC的范围包含创建该上下文元素的所有子元素,但 不包括 创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中,那么就意味着这个元素能与两个BFC中的元素发生作用,就违反了BFC的隔离作用。

常规流(Normal flow)

浮动(Floats)

绝对定位(Absolute positioning)

注意: display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC。

浏览器对BFC区域的约束规则:

规则解读:

BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。我们可以利用BFC的这个特性来做很多事。

一个正常文档流的block元素可能被一个float元素覆盖,挤占正常文档流,因此可以设置一个元素的float、display、position值等方式触发BFC,以阻止被浮动盒子覆盖。

[使用BFC阻止元素被浮动元素覆盖]点击预览

通过改变包含浮动子元素的父盒子的属性值,触发BFC,以此来包含子元素的浮动盒子。

[使用BFC包含浮动元素]

注意,这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

BFC内部其他形式脱离文档流(absolute fixed) 点击预览

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况,可以在最后一列触发BFC的形式来阻止换行的发生。比如下面栗子的特殊情况

使用BFC阻止多列布局最后一列换行 点击预览

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

这里给任一个相邻块级盒子的外面包一个div,通过改变此div的属性使两个原盒子分属于两个不同的BFC,以此来阻止margin重叠。

使用BFC阻止margin合并 点击预览

但是这里有个 疑问 点击预览 :

如果外面包一层div,设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。

而如果在外面不包一个div的话,当设置display为inline-block、inline-flex、table-captain,和position为absolute、fixed,float为left、right是可以阻止margin合并的。这里问题来了:

我们知道设置position和float会让元素脱离文档流并且又创建新的BFC,所以两个元素就不是相邻元素了,因此可以阻止相邻元素margin合并,但是inline-block、inline-flex、inline-grid、table-captain为什么可以呢?如果有人知道为什么,请告知~

最近无意间看到很多文章写overflow: hidden可以清除浮动,但大多并没有说明其原理。这里就介绍一下BFC。平时会利用BFC解决一些如清浮动,防止 margin 重叠等问题,但是BFC具体是什么,就感觉只可意会不可言传了,于是特地花了半天时间,查阅了一些资料和文章,记录一下自己的学习过程(其实在 《CSS盒子模型》 一文中已经提及一些知识,为了方便,这里特地重新开一篇文章,方便以后查阅)。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

Box 是 CSS 布局的对象和基本单位,一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;

inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

1.根元素

2.float属性不为none

3.position为absolute或fixed

4.display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

根据第二部分的BFC布局规则第四个,我们只要让child2成为BCF就可以和child1不重叠;再根据第三部分生成BFC的元素的条件,可以为child2设置 display也可以设置overflow等等,可以达到如下图效果

达到了我们希望的自适应两栏布局。

到这里应该知道为什么overflow: hidden可以清除浮动;

第二本部分BFC布局规则第六:计算BFC的高度时,浮动元素也参与计算;

第三部分生成BFC的元素的条件第五:overflow不为visible。

具体例子可以参考我的这篇 《常见的清除浮动方法》 。

根据BFC布局规则第二:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。让child2和child3为不同的BFC的box就不会重叠了。

其实以上的几个例子都体现了BFC布局规则第五条:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。