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