摘要：后续会对这两点进行更正。这也是外部容器盒中采用来解决浮动带来的外部元素高度塌陷的问题。溢出将在满足下列条件之一时出现一个不换行的行元素宽度超出了容器盒子宽度。一个元素的高度超出了容器盒子的高度。
1. 引子
前两天在测试overflow:hidden属性，写了下面一个例子：
html
你会发现效果是这样的。
我比较不理解的是，#left 已经浮动了，脱离了常规流，为何 #wrap 这个外部盒子还能发挥 overflow:hidden 这个作用。
于是，谷歌一顿乱搜，发现了下面这个东西 Block Formatting Context（块格式化上下文），CSS3 中也叫做 flow root。这玩意儿和引子中的问题好像没啥关系，但觉得挺有用的，还是写在下面。
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 是啥，有啥特性，就不多解释了，上面那些文章解释得肯定比我要好。我说一下我从中的理解：
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 环境中。
如果某个元素触发了 BFC 或者说成为了一个 flow root，那么这个元素将拥有新的一个 BFC环境（这使得这个元素和其兄弟元素、子元素之间的边距等效果会发生变化，具体详见上面文章的 BFC 特性。）
看了一圈下来，发现 BFC 确实可以解释很多问题，也有很多作用。如：
“"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.
简单来说，就是若浮动的子元素的底部在外部元素之下，那么外部元素的高度将向下延伸，直至包裹这个浮动元素。（这也是外部容器盒中采用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...
满足上述条件的，包括绝对定位和浮动，都可以被隐藏溢出。
本来是不想写这篇的，因为没啥结论得出来，还绕了个大圈。但就当做是对自己发现问题，解决问题的一种鞭策吧。继续加油！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111022.html
摘要：参考在讲之前，先来了解一下规范里面的一个关于元素的定位规则主要有三种常规文档流，浮动，绝对定位。而这些值都是相对其父元素来说的。在上面的第一点里面我们已经提到了一个概念叫。 参考：https://www.w3.org/TR/CSS21/v...在讲BFC之前，先来了解一下CSS2.1规范里面的一个关于元素的定位规则(positioning schemes),主要有三种：常规文档流，浮动...
摘要：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。两个同胞盒间的垂直距离取决于属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 FC（Formatting Context）指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。常见的FC有BFC、IFC，GFC和FFC。 BF...
摘要：我们可以注意定义中的几个关键字毗邻两个或多个垂直方向和普通流。如何避免外边距叠加上面讲了外边距的叠加，那如何避免呢，其实只要破坏上面讲到的四个条件中的任何一个即可毗邻两个或多个普通流和垂直方向。 外边距叠加一直是前端开发必须了解的一个概念，面试一般也会问到这个问题。所以整理一下相关外边距叠加相关的知识点。外边距叠加是什么？什么时候会发生外边距叠加？如何避免外边距叠加？ 什么是外边距叠加...
摘要：这个没有起作用对的设定后，就失效了，而元素就以正常的形式呈现。五的描述盒位置根据正常流计算这称为正常流动中的位置，然后相对于该元素在流中的和最近的块级祖先元素定位。在所有情况下即便被定位元素为时，该元素定位均不对后续元素造成影响。关于CSS position，来自MDN的描述： CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...
摘要：是指块级元素，就是会强制换行的元素，比如。将元素推向左侧。请根据不同的实际情况，选择最合适的方式。再次重申一下，是为子元素创建定位环境。，由于浮动元素占据了一定的宽度，新创建的会因此而变窄。这里只是为了更好地去理解而做一个例子。 什么是 BFC W3C 为浏览器规定了三种定位模型：Normal Flow, 浮动, 和绝对定位。本文所介绍的 BFC (Block Formatting M...
阅读 4146·2021-11-19 09:59
阅读 2967·2021-10-12 10:12
阅读 1484·2021-09-29 09:32
阅读 2345·2021-09-22 15:25
阅读 2135·2021-09-04 16:45
阅读 3094·2019-08-30 15:55
阅读 1060·2019-08-29 11:27
阅读 1333·2019-08-28 18:06
