</style>
</head>
<body>
<div id="header"> … </div>
<div id="sidebar"> … </div>
<div id="main"> … </div>
<div id="footer"> … </div>
</body>
</html>
在浏览器中显示的布局大致是：
代码中，使用了auto的属性有: #header bottom, #sidebar right, #footer top. 而对于#main呢，它的height和width都是auto，也就是说main的长宽是自适应的，自动填充可用空间，这也就好理解了，所谓的auto，也就是使元素的上右下左距离能够根据相关联的，或者说共同父元素的子元素之间的关系自动调整。
四、Normal Flow
前面提到了很多次“常规文档流”，实际上也就是W3C文档中的Normal Flow，也可称为常规流。常规流的理解，主要围绕着两个方面，分别是格式化上下文(Formatting Context)和相对定位(Relative Positioning)。
格式化上下文，按照W3C文档的解释，分为Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，这里我觉得没有什么翻译成中文的必要了，因为如果我说“块级格式化上下文”的话，诸位能理解是什么意思吗，所以，叫BFC和IFC就挺好。
所谓BFC，文档上解释得挺啰嗦，简单来说，就是块级box顺次垂直排列。当然也不能这么简单，原因是块级box的内部还会产生BFC，也就是说可以嵌套。
CSS Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8" />
</head>
<body>
<div style="width: 400px; height: 300px; background: blue;">
<div style="width: 200px; height: 100px; background: red;"></div>
<div style="width: 100px; height: 150px; background: green;"></div>
