BFC及其应用

最初在看见BFC,两眼一愣,这是个什么玩意,看过的两本书上都没有谈论到。于是balabala一顿谷歌,现在勉强能弄懂了(然后又是满屏幕的overflow hidden,这是病得治啊!),然后就整理了一下。

<!--more-->

1. BFC

在了解BFC之前,首先需要弄清楚的是盒子模型,这是CSS布局的对象和基本单位。 可以说这样说,一个页面,是由许多的盒子组成的,元素的类型与display的属性,决定了这个盒子的类型,不同的盒子,其渲染方式是不一样的。(官方的说法叫做Formatting Context,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用) 如果display属性为block的盒子,就会参与block fomatting context,也就是上面所说的BFC,此外还有Inline formatting context (简称IFC)。(context这个词是名词,原意是环境/上下文,放在这里略显晦涩,我只能将它直译成“块级元素渲染环境”,当然这并不妨碍理解)

2. 触发BFC

BFC是CSS2.1规范中的一个概念,满足下面任意一个条件的块级元素都会触发BFC。为了加深印象,正反情形我都列举出来了。

  • 根元素,是指文档树中没有父元素的元素,也就是最顶层结构的元素,一般情况下是html元素;
  • float属性不为none,即float为left||right;
  • position不为relative,即position为absolute||fixed;
  • display为inline-block, table-cell, table-caption, flex, inline-flex,这里特别需要注意的是inline-block。
  • overflow不为visible,即overflow为hidden||auto||scroll,这里特别需要注意的是hidden;

3. BFC的规则

了解怎么“制造”BFC元素之后,就应该认识这些BFC具有的布局规则了。

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,准确的说只有在同一个BFC内的元素才会发生外边距折叠。
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此,这就是BFC所具有的大名鼎鼎的独立区域属性,躲进小楼成一统,管它春夏与秋冬。
  • BFC的区域不会与float box重叠,即旁边的浮动元素是无法遮挡住BFC元素的。
  • BFC可以包含浮动元素,意思就是BFC的高度计算是包括其浮动的子元素的,浮动元素的高度也参与BFC高度计算(重要的事情说两遍!),这下即使子元素全部都是浮动元素,BFC也可以知道它自己的高度了。

4. 使用BFC进行布局

BFC的布局规则弄清楚之后,当然就应该学习他的布局作用了,最常见的作用就是清除外边距折叠与清浮动了。

4.1. 清除外边距折叠

由布局规则第二条可知,当两个相邻的块级元素不再同一个BFC中时,是不会发生竖直方向上的外边距重叠的,在有的时候莫名其妙的发生了外边距不重叠,或者是在某些情况下不需要这种折叠的时候,就可以用到BFC了,需要注意的是父块为BFC的情况下也不会与子块发生外边距重叠。

4.2. 清浮动

由布局规则第六条可知,BFC可以包含浮动元素,并正确的显示自己高度,如果父块没有设置高度则由其内部的子块撑开,BFC仍然处于文档流中,因此可以触发BFC达成清浮动的目的;此外,由于BFC还不与浮动元素的aside重叠(第五条),因此会根据自身宽度和aside的宽度,自动变窄。

5. 最后

根据有道云上写的笔记大概整理了这么点东西,以前对于overflow hidden可以清浮动一直不太理解,原来就是BFC的作用,果然需要还是有深度的学习才行。这篇文章还有待补充,先挖个坑吧。