CSS 的主要好处之一是，它能够控制页面布局而不需要使用表现性标签。但是，CSS布局被误认为是难以理解的，在初学者中，这种想法尤其普遍。这在一定程度上是由于浏览器的不一致造成的，但主要原因是 Web 上不同布局技术的数量激增所致。似乎每个 CSS 作者都用自己的技术创建多列的布局，而且新的 CSS 开发人员常常使用一种技术却不真正了解它的工作原理。这种进行 CSS 布局的 "黑盒" 方法可能会迅速地得到想要的结果，但是最终会阻碍开发人员理解这种语言。
所有 CSS 布局技术都依赖于三个基本概念：定位、浮动和空白边操纵。不同的技术其实没有本质的差异，而且如果理解了核心概念，那么创建自己的布局是相当容易的。
在本章中，你将学习：
- 让设计在页面中水平居中。
- 创建两列和三列的基于浮动的布局。
- 创建固定宽度、流体和弹性布局。
- 将列拉长到整个可用空间的高度。
7.1 让设计居中
7.1.1 使用自动空白边让设计居中
为了让这个方法在所有浏览器中都能够顺利地工作，需要做最后一件事情。在 Netscape 6 中，当浏览器窗口的宽度减少到小于容器的宽度时，容器的左边会跑到屏幕的外边，就无法访问它了。为了防止这种现象，需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度：
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
现在，如果试图将窗口的宽度减少到小于容器 div 的宽度，就会出现滚动条，使用户能够访问所有内容。
7.1.2 使用定位和负值空白边让设计居中
到目前为止，使用自动空白边进行居中的方法是最常用的，但是它需要用一个招数来满足 IE5.x 的要求。它还要求对两个元素而不只是一个元素应用样式。因此，有些人喜欢使用定位和负值空白边来代替这种方法。
与前面一样，首先定义容器的宽度。然后将容器的 position属性设置为 relative ，将 left 属性设置为 50%。这会把容器的左边缘定位在页面的中间。
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
但是，并不希望让容器的左边缘居中，而是希望让容器的中间居中。实现的方法是对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半，从而让它在屏幕上居中：
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
选择使用哪种居中技术是个人喜好问题。但是，同时掌握多种技术总是有好处的，因为不知道什么时候某种技术正好合适。
7.2 基于浮动的布局
用CSS 进行布局有几种不同的方式，包括绝对定位和使用负值空白边。我发现基于浮动的布局是最容易使用的方法。顾名思义，在基于浮动的布局中，只需设置希望定位的元素的宽度，然后将它们向左或向右浮动。
因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是，不对元素进行连续地浮动和清理，而是浮动几乎所有东西，然后在这个文档的 "战略点" (比如页脚) 上进行一次或两次清理。
7.2.1 两列的浮动布局
要想使用浮动创建简单的两列布局，首先需要有一个基本的 (X)HTML 框架。在下面的示例中，(X)HTML 由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器 div 中，这个div 使用前面介绍的方法之一进行水平居中：
这个设计的主导航区域将位于页面的左边，内容位于右边。但是，为了易用性和可访问性，在源代码中将内容区域放在导航的前面。首先，主内容是页面上最重要的东西，所以在文档中应该先出现。其次，这样可以方便屏幕阅读器用户，他们用不着经过可能很长的链接列表才找到内容部分。
在创建基于浮动的布局时，一般将两列都向左浮动，然后使用空白边或填充在两列之间创建一个隔离带。在使用这种方法时，列在可用空间内包得很紧，没有喘息的空间。如果浏览器表现良好的话，那么这不是问题；但是差劲的浏览器会打乱紧密的布局，迫使一列退到另一列的下面。
在 IE 上就会发生这种情况，因为 IE/Win 考虑元素内容的尺寸，而不是元素本身的尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是，在 IE/Win 上，如果元素的内容太大，整个元素就会扩展。如果这发生在非常紧密的布局中，那么就没有足够的空间可以让元素并排出现，浮动元素之一就会退到下面去。
*****其他IE bug (比如 3像素文本偏移 bug 和双空白边浮动 bug ，见第9章) 也会导致浮动元素下降。******
为了防止发生这种情况，需要避免浮动布局在包含它们的元素中太挤。可以不使用水平空白边或填充来建立隔离带，而是将一个元素向左浮动，另一个元素向右浮动，从而创建视觉上的隔离 (见图 7-2)。如果一个元素的尺寸意外地增加了几个像素，那么它不会立刻占满水平空间并下降，而只是扩展到视觉隔离带中。
实现这个布局的 CSS 非常简单。只需为每个列设置想要的宽度，然后将导航向左浮动，将内容向右浮动：
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然后，为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚：
#footer {
clear: both;
}
基本的布局现在完成了。还需要做一些小调整以便让布局更有条理。首先，导航区域中的内容一直顶到容器的边缘上，这不太好看，需要留出点儿空间。****可以直接在导航元素上添加水平填充，但是这会调用 IE5.x 专有的框模型。为了避免这种情况，将水平填充添加到导航区域的内容上****：
内容区域的右边也一直顶到容器的右边缘上，也需要留出点儿空间。同样，并不把填充直接应用到元素上，而是把填充应用到内容上，从而避免处理 IE 的框模型问题：
#content h1, #chontent h2, #content p {
padding-right: 20px;
}
现在完成了想要的效果：一个简单的两列CSS布局 (见图 7-3) 。
7.2.2 三列的浮动布局
创建三列布局所需的 HTML 与两列布局的 HTML 非常相似，惟一的差异性是在内容 div 中添加了两个新的 div ：一个用于主内容，另一个用于次要内容。
可以使用与两列布局技术相同的 CSS，在已经浮动的内容 div 中，将主内容向左浮动，将次要内容向右浮动 (见图 7-4)。这本质上就是将内容列分成两列，从而形成三列的效果。
与前面一样，所用的 CSS 非常简单。只需设置想要的宽度，然后将主内容向左浮动，将次要内容向右浮动：
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
可以将填充从内容元素上去掉，并且将它们应用于次要内容的内容上，从而让布局显得更有条理：
#secondaryContent h1, #secondaryContent h2, #secondaryContent p {
padding-left: 20px;
padding-right: 20px;
}
这样就形成了一个漂亮的三列布局 (见图 7-5)。
