BFC基本认识:
在学习BFC之前,我们有必要清除了解BFC到底是什么东东。BFC,中文名字叫做“块级格式化上下文”,英文是“block formatting content”,所以我们要在block、formatting content两方面来认识BFC。
1.box
说到block,那么我们首先需要认识css中的box,总所周知,box是css中重要的一个布局基本单位,直观来说一个网页的组成是由众多的box组成的。元素的类型和display属性有关;不同类型的box,会参与不同的formatting content(一个决定如何渲染文档的容器),因此box中的元素会以不同的方式进行渲染。而我们所知道的元素类型基本分为如下三种类型:block-level 块级元素、inline-block-level 行内块元素,inline-level 行内元素。我们主要看盒子:
- block-level box:块级元素盒子;display属性的值为:block、list-item、table 的元素,会生成block-level box,并且参与block formatting content。
- inline-level box:行内块元素盒子;display属性值为:inline-block、inline、inline-table的元素,会生成inline-block box,并且参与block formatting content。
- run-in box: 这是C3才有,现在不讨论,因为基本不会使用到。
2.formatting content
Formatting content是W3C CSS2.1 规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的Formatting content有Block formatting content(简称BFC)和inline formatting content(简称IFC)。
CSS2.1中只有BFC和IFC,CSS3中还增减了GFC和FFC。
3.BFC定义
BFC(Block formatting content)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有block-level box 参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。
官方解析:BFC是W3C CSS2.1 规范中的一个概念,它决定了元素如何对齐内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,block formatting content 提供了一个环境,HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。不如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素的影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思,也可以说BFC就是一个作用范围。可以把它理解成一个独立的容器,并且这个容器里面的box布局,与这个容器外的毫不相干。
另外一种通俗的解释是:在普通流中的box属于一种formatting content,类型可以是block或者是inline,但不能同时属于两者。并且,block boxes(块框)在block formatting content 里格式化,inline boxes(块内框)则在inline formatting content里格式化。任何被渲染的元素都属于一个box,并且不是block,就是inline。即使是未被任何元素包裹的文本,根据不同的情况,也会属于匿名的block boxes或者inline boxes。所以上面的描述,即是把所有的元素划分到对应的formatting content里。
4.BFC的布局规则
- 内部的box会在垂直方向上,一个接一个地放置
- box垂直方向的距离由margin决定,属于同一个BFC的两个相邻的box的margin会发生重叠。
- 每个元素的margin-box的左边,与包含块border-box的左边相接触(对于从左到右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。(在移动端开发中,常用这个特性来实现两个box左右排列)
关于这几天规则的几点说明:
- 当容器有足够的剩余空间容纳BFC的宽度时所有浏览器都会将BFC放置在浮动元素所在行的剩余空间内。
- 当BFC的宽度大于容器剩余宽度时,最新版本的浏览器中只有firefox会在同一行显示,其他浏览器均换行。
- 利用BFC和float实现两栏自适应时,触发BFC的盒子不需要设置宽度,它会自动占满余下的所有空间。
- 在第三条的规则之下,如果你希望实现三栏自适应,那么你需要先将左右浮动的盒子设置好,然后再方触发BFC的盒子,不然由于BFC盒子默认占满余下的空间,导致第三个浮动的盒子被强制换行。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度是,浮动元素也参与计算。
哪些元素会生成BFC
- 根元素
- float属性部位none
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、Flex、inline-Flex
- overflow部位visible