Block Formatting Context (Flow Root)

时间 2019-12-07

标签 block formatting context flow root 栏目 Linux 繁體版

原文原文链接

1. 引子

前两天在测试overflow:hidden属性，写了下面一个例子：css

html<head>
<style type="text/css">
    #wrap{
        width:1000px;
        margin:0 auto;
        background-color:#FF0;
        height:200px;
        overflow:hidden;
    }
    #left{
        width:500px;
        height:400px;
        background-color:#FC8;
        float:left;
    }
</style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
    </div>
</body>

你会发现效果是这样的。html

我比较不理解的是，#left 已经浮动了，脱离了常规流，为什么 #wrap 这个外部盒子还能发挥 overflow:hidden 这个做用。css3

因而，谷歌一顿乱搜，发现了下面这个东西 Block Formatting Context（块格式化上下文），CSS3 中也叫作 flow root。这玩意儿和引子中的问题好像没啥关系，但以为挺有用的，仍是写在下面。segmentfault

2. 关于 BFC （flow root in CSS3）

我读了各类文章，列举比较好的几篇：编辑器

http://w3help.org/zh-cn/kb/010/
http://kayosite.com/block-formatting-contexts-in-detail.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
http://www.iyunlu.com/view/css-xhtml/55.html
第一部分最后那三个名词的官方解释也是

关于 BFC 或者 flow root 是啥，有啥特性，就很少解释了，上面那些文章解释得确定比我要好。我说一下我从中的理解：ide

BFC 或者 flow root 是一个渲染的环境，与外部隔绝。不是随便一个 div 这样的块级元素就能触发的。它的触发须要必定的条件（那些文章中都有）。

下面这两点是不对的， BODY 并不会默认触发 BFC。 SF的Markdown编辑器好像没有删除线功能，就只能先这样表示了。当时不知道本身脑子抽风是怎么样想的。但愿不要误导你们。后续会对这两点进行更正。也可参看 SF 中下面的这个问题，太牛啦。
问题测试

2. 一个 HTML Document 的 body 元素，默认触发了一个 BFC 或者是一个 flow root。（你能够在body里面写几个有边距的 div，看到边距重叠，就懂了。由于边距重叠是一个 BFC 或者 flow root 的特性。）
3. 基于第二点，不触发 BFC 或者不是一个 flow root 的普通块级元素，都在 '''body''' 这个 BFC 环境中。spa

若是某个元素触发了 BFC 或者说成为了一个 flow root，那么这个元素将拥有新的一个 BFC环境（这使得这个元素和其兄弟元素、子元素之间的边距等效果会发生变化，具体详见上面文章的 BFC 特性。）

看了一圈下来，发现 BFC 确实能够解释不少问题，也有不少做用。如：code

“'Auto' heights for block formatting context roots”
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.orm

简单来讲，就是若浮动的子元素的底部在外部元素之下，那么外部元素的高度将向下延伸，直至包裹这个浮动元素。（这也是外部容器盒中采用overflow:hidden来解决浮动带来的外部元素高度塌陷collapse的问题。这种方法也被叫作闭合浮动）。

3. 言归正传

BFC 或者 flow root 好像跟 overflow:hidden 能隐藏自身的浮动子元素溢出部分的关系不大。
本来觉得隐藏溢出内容所在的子元素必须和父元素在一个流中，后来又去找了overflow:hidden隐藏溢出的资料，发现了

http://www.aliued.cn/2012/12/30/overflowhidden真的失效了吗.html

其中指出：

一般一个盒子的内容是被限制在盒子边界以内的。但有时也会产生溢出，即部分或所有内容跑到盒子边界以外。溢出将在知足下列条件之一时出现：
1. 一个不换行的行元素宽度超出了容器盒子宽度。
2. 一个宽度固定的块元素放在了比它窄的容器盒子内。
3. 一个元素的高度超出了容器盒子的高度。
4. 一个子孙元素，由负边距值引发的部份内容在盒子外部。
5. text-indent属性引发的行内元素在盒子的左右边界外。
6. 一个绝对定位的子孙元素，部份内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

而且发现 position:absolute 的元素，也能够被隐藏溢出。
隐藏溢出跟是否在一个流中好像没什么关系...ORZ...
知足上述条件的，包括绝对定位和浮动，均可以被隐藏溢出。

原本是不想写这篇的，由于没啥结论得出来，还绕了个大圈。但就当作是对本身发现问题，解决问题的一种鞭策吧。继续加油！