重拾CSS规范之BFC & IFC

BFC、IFC的概念重要吗?不重要,没有它们我们也能写出符合要求甚至很好的页面。重要,深入了了解了CSS这门语言的核心,你的CSS才可能会有创造性,你才能发明出你自己的奇淫技巧,而不是遇到新的情境就去百度,google。

在看这篇文章之前,先得了解一些无聊的基本概念,重拾CSS规范之从盒类型谈起,当然,我已经尽可能让它有趣了。

FC

FC(Formating Context,格式化上下文) 是一个布局的环境,它里面的盒子需要遵循FC这套体系的规则, CSS2.1 中定义了 BFC(Block Formating Context,块级格式化上下文) 和 IFC(Inline Formating Context,内联格式化上下文), BFC 讲的是块级盒子的布局规则, IFC 讲的是内联级盒子的布局规则。

BFC

脱离特性讲定义都是流氓!!!光看个定义不好使,赶紧来捋一捋 BFC 的家规吧。

1. 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。

这里只说明了一点: 如何触发BFC!(很重要啊,多练多记忆,一定要熟稔于心)

2. 在一个块格式化上下文中,从包含块的顶部开始,盒在竖直方向一个接一个地放置。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。

关于 margin 合并的问题,我在这篇文章里面已经描述的很详细了:重拾CSS规范之margin

透过下面的DEMO来看看如何阻止 margin 合并:

margin 一文中 margin合并规则 中写到了这么一句话,新建了块格式化上下文的元素不会与它的子元素的 margin 合并,所以 .wrap 元素就不会合并 .first 元素的 bottom margin 了,也就无法与 .second 元素发生 margin 合并了。

而且我们可以发现, BFC 就是一个密闭的容器 , BFC 里面的元素无法对外界元素在布局上产生直接的影响。(为什么我要用‘直接’呢,因为它完全可以撑开 BFC 元素,来‘挪动’外界元素的位置)

那我们再考虑一个问题, 产生了新的 BFC 的盒会与它的兄弟盒产生 margin合并 吗?

当然是会的。

3. 在一个块格式化上下文中,每个盒的left外边挨着包含块的left边(对于从右向左的格式化,right边挨着)。即使存在浮动(尽管一个盒的行盒可能会因为浮动收缩),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)

这里主要涉及到的就是多栏自适应布局的应用了。

如果要控制两者之间的间距,最好对 .left 元素使用 margin-right 。因为如果对 .center 元素使用 margin-left 的话,首先 margin-left 值必须要超过 .left 元素的宽度值,否则无法体现作用;再者对 .center 元素设置 margin-left 了,不就又回到了流体自适应布局了吗!

4. 在计算生成了 BFC 的元素的高度时,其浮动子元素应该参与计算。

几年前我技术很差的时候总在疑惑,float元素没法撑开父元素高度,但是为什么给父元素增加设置不为 ‘none’ 的 ‘overflow’ 值就可以了,现在总算是解开谜题了。。。

IFC

上一篇文章中已经提到了很多 IFC 相关的知识,这次再补充一点。

IFC 中的盒子与 BFC 中的不同的是,它们可以水平依次放置。

IFC中的行盒的宽度是包含块的宽度减去 float 元素(如果有的话)的宽度,行盒高度是最高的盒的top与最低的盒的bottom之间的距离。

内联盒的高度是由line-height决定的,而可替换元素,inline-block,inline-table 元素的高度则是由它们的 margin 盒高度决定的。

关于行高的计算后面会有较大篇幅的文章来介绍,敬请期待!

‘display’,’position’与’float’之间的关系

如果’position’值为’absolute’或者’fixed’,或者’float’值不为’none’,或者该元素是根元素,那么display就根据下表来设置。

同时设置’absolute’或者’fixed’、非 ‘none’ 的 float,float 会被覆盖为 ‘none’。

指定值 计算值
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
其它 与指定值相同

热评文章