我对BFC的理解

  • 对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。那首先我们就来看看FC的概念。
  • Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
  • BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

BFC的生成

  • 既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
  • float的值不为none;
  • overflow的值不为visible;
  • display的值为inline-block、table-cell、table-caption;
  • position的值为absolute或fixed;
    看到有人把display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。

BFC的约束规则

浏览器对于BFC这块区域的约束规则如下:

  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,俩个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。
  • 生成BFC元素的子元素中,每一个子元素的外边距和包含块的左边界相接触,(对于从右到左的格式化,右外边距和右边界相接触),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。

有朋友对它做了分解,我们直接拿来:

  1. 内部的BOX会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离有margin决定。(完整的说法是:属于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。)
  3. 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
  4. BFC的区域不会与float的元素区域重叠;
  5. 计算BFC的高度时,浮动子元素也参与计算;
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;

看到以上的几条约束,让我想起了学习CSS时的几条规则:

  • Block元素会扩展到与父元素同宽,所以block元素会垂直排列;
  • 垂直方向上的俩个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确);
  • 浮动元素会尽量往左上方(或右下方);
  • 为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素;
  • ……

BFC在布局中的应用

上面说了那么多,那么BFC究竟有什么用,毕竟再好的东西也要为我所用才行。

防止margin重叠:

  • 同一个BFC中俩个相邻的box才会发生重叠与方向无关,不过由于上文提到的第一条限制,我们甚少看到水平方向的margin重叠。这在IE这中是个特例,IE可以设置write-mode。
  • 要阻止margin重叠,只要将俩个元素别放在一个BFC中即可(可以用上文提到的方式让相邻元素其中一个生成BFC)。阻止俩个相邻元素的重叠看起来没有意义,主要用于嵌套元素。

浮动相关问题;

  • 使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或者浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。

多栏布局的一种方式

  • 上文提到的一条规则:与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
  • 这种布局的特点在于左右俩栏的宽度固定,中间栏可以根据浏览器宽度自适应。


    多栏布局
  • IE中也有与BFC类似概念的haslayout。

总结

  • 在我第一次接触BFC时经常有一个疑问,BFC的结构是什么样的,像DOM一样的树状结构,还是一个BFC集合。其实我们不需要关心BFC的具体结构,这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则我们可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。
  • 对于CSS新手来说不建议涉猎BFC,还是应该去看看相应的CSS布局规则,像《CSS设计指南》、《CSS权威指南》这俩本都很不错,达到一定积累再来看BFC,说不定会有一种豁然开朗的感觉。BFC中几乎涉及到CSS布局的所有重要属性,这也是BFC的难点和我们需要掌握BFC的意义所在。

此处要说明的是,这篇文章是我几乎一字不落的抄下来的,因为我对于BFC一窍不通,我认为这样抄录一遍对于我理解BFC会有帮助的,但是看到作者说不建议新手涉猎BFC,我就释然了。
参考文献——我的小树林

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,174评论 1 91
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    莫可可小姐d远方阅读 3,297评论 15 40
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 667评论 0 2
  • 前端7班+余愿 鉴于我对BFC的理解难度,我觉得有必要把我的理解过程记录并保存下来,以后忘了可以随时来翻翻,也可以...
    Tuseday阅读 332评论 3 1
  • 作者:Joshua Bemenderfer原文地址: lazy-loading-routes译者:jeneser ...
    jeneser阅读 6,138评论 3 21