白话Block Formatting Context -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 白话Block Formatting Context

白话Block Formatting Context

浏览:1784次出处信息

关于文中的示例，请忘掉IE浏览器，用标准浏览器查看。

一，啥是Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

二，怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

三，Block Formatting Context在生产中有什么作用

Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：

以下是代码片段：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
  html, body {
   margin: 0;
   padding: 0;
  }
  #red, #orange, #yellow, #green {
   width: 100px;
   height: 100px;
   float: left;
  }
  #red {
   background: red;
  }
  #orange {
   background: orange;
  }
  #yellow {
   background: yellow;
  }
  #green {
   background: green;
  }
</style>
</head>
<body>
<div id="c1">
  <div id="red"></div>
  <div id="orange"></div>
</div>
<div id="c2">
  <div id="yellow"></div>
  <div id="green"></div>
</div>
</body>
</html>

在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。

Block Formatting Context可以阻止元素被浮动覆盖。请看示例：

以下是代码片段：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
  html, body {
   margin: 0;
   padding: 0;
  }
  #left {
   width: 100px;
   height: 100px;
   background: red;
   float: left;
  }
  #right {
   height: 200px;
   background: yellow;
  }
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

如果想全面了解Block Formatting Context，请看CSS 101: Block Formatting Context这篇文章。

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：触发hasLayout引起的BUG

后一篇：HTML5中的自定义属性 >>

文章信息

作者：小寒来源：记事本
标签：可视化布局
发布时间：2010-08-17 23:03:47

建议继续学习

近3天十大热文