ICSS中BFC的理解.docVIP

BFC是什么 Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下的方式对其子元素进行排列： 元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 margin 特性。在 BFC中相邻的块级元素的垂直边距会折叠（collapse）。 元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。 如对于如下的HTML页面： class=father的div为创建了新的BFC的容器，它的两个子元素的起始都是从容器的最左边开始的，尽管第一个div为浮动，且占据了它的部分空间。如红色背景色为p的区域。而第二个子div,由于其的浮动设为向右浮动，因此它也创建了一个BFC 什么情况下会创建BFC CSS 规范说明了在下列这些情况下会创建新的 block formatting context： 浮动元素（float: left | right）； 绝对定位元素（position: absolute | fixed）； 行内块元素（display: inline-block）； 表格的单元格（display: table-cells，TD、TH）； 表格的标题（display: table-captions，CAPTION）； overflow 特性不为 visible 的元素（除非该值已经传播到viewport?）； 表格元素创建的 匿名框 注意，display:table 本身并不产生 block formatting contexts。但是，它可以产生匿名框 6， 其中包含 display:table-cell 的框会产生块格式化上下文。 总之，对于 display:table 的元素，产生块格式化上下文的是匿名框而不是 display:table 注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。 BFC的主要特性 BFC的主要用处是清除浮动，以及实现多栏布局 创建了 BFC 的元素中，子浮动元素也会参与高度的计算，即不会发生高度‘塌陷’,可以利用这个特性来实现清除浮动的功能 Container 的高度值为 auto，并且 overflow 的值为hidden；即Container 创建 block formatting context。 SPAN1 是一个行内元素， DIV1 是一个处于普通流中的块元素； DIV2 是一个浮动的块级元素。 而如果去掉Container的overflow:hidden,即恢复其默认值为overflow:visible，它变为普通流，则显示如下： 根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。 与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。利用该特行，可以实现多栏布局 In a block formatting context, each boxs left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)。 其中，grid2a.png 背景是 100px * 100px 的图片： DIV1 是一个浮动元素，背景是50%的透明 DIV2 的 overflow:hidden;，即创建了BFC 根据 CSS 2.1 9.5 Floats 中的描述，创建了 Block Formatting Context 的元素不能与浮动元素重叠， 所以，DIV2 应该有一部分被 DIV1 覆盖。 而如果去掉’overflow:hidden’，则根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，DIV2 应该有一部分会被 DIV1 覆盖。 创建了BFC的元素不会与它们的子元素发生外边距折叠 Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。 DIV1 的宽度没