第八章--布局
第八章 布局
CSS的主要好处之一是，他能过控制页面布局 而不需要表现性标记。 但是css布局被认为是难以理解的。 似乎每一个css作者都用自己的技术创建多列布局，而CSS开发人员常常不了解真正所用的技术的工作原理。 所谓的CSS 框架的出现进一步恶化了这种局面。 CSS框架试图在标记和表现之间建立强耦合来简化css的布局， 这种耦合式我们真正抛弃基于表格布局的主要原因。 这种CSS布局以“黑盒子”的让人迅速的到想要得到的结果， 但是最终阻碍了开发人员理解这种语言和修改的能力。
所有的CSS布局的根本都是有3个基本概念：定位、浮动、和外边距操纵。 这些CSS布局技术其实没有本质的区别，只要理解了核心概念，创建自己的布局是相当容易的。
在本章中，你即将学习：
让设计在页面中水平居中
创建两列和三列基于浮动的布局
创建固定宽度，流式和弹性布局
创建高度相等的咧
CSS框架和css系统
8.1 计划布局
当开始把设计转化成功能完整的模板时，设计者往往很想马上开始编写页面和处理图像。 但是这很快就会遇到麻烦，先做一点计划可以避免很多问题。正如俗话说的“要三思而后行”。
要想创建出可伸缩而且容易维护的CSS系统，首先应该检查设计，寻找出重复的模式。 这包括结构中的模式和在站点元素中反复出现的方式。 在这个阶段，不应该太关注表现方式，而是应该关注结构和意义。
先把页面分成大的结构性的区域，比如 容器、页眉、内容区域和页脚。
然后将注意力转化到内容区域本身，开始建立网格结构。设计有多少内容区域，他们有什么差异？ 所以现在应该寻找的是共同特征而不是视觉表现。
最后，在各个内容区域寻找不同的布局结构。 将这些结构与前一步相结合就能形成每个页面的结构计划。 现在拿起绘图笔和尺子，开始详细的设计结构和尺寸。
结构设计完成以后，现在可以开始关注不同类型的内容。 让每一个内容唤起一个有意义的名字， 然后分析他们的关系， 进行分类。
再看看不同的类型中是否有共同的模式。 对于页眉和页脚，错误消息、菜单项，搜索项也是这样。 应该尽量采取一般的类名，然后根据上下文应用样式。
找出模式并确定命名约定后，最好马上开始定义将使用的元素，这样是最好的。 文章可能是一个div，其中包含h2,段落课锚元素。提前定义比随时添加容易的多。 随时记下颜色编码，尺寸等信息，在开发阶段会有帮助。
8.2 设置基本结构
假设我们要开发一个典型的三列博客模板，如图：
通过分析发现，我们需要一个容器元素让设计居中，其中包含页眉，内容区域和页脚，因此标记应该像这样一样：
<body>
<div class="warpper">
<div class="header">
<!--head content gose here-->
</div>
<div class="content">
<!--page content gose here-->
</div>
<div class="footer">
<!--footer content gose here-->
</div>
<body>
然后三个区域放在容器中，我们先设置容器元素的样式。
使用外边距让设计居中
长文本行阅读起来很困难，让人讨厌。 现代显示器越来越大， 屏幕可读性问题变得越来越重要。 环节这个问题的一种方法是让设计居中。
假设有一个典型的布局，希望在其中的容器的div在屏幕上水平居中：
<body>
<div class="warpper">
</div>
</body>
为此只需要定义容器div的宽度，然后水平外边距设置为auto：
.warpper{
width:920px;
margin:0 auto;
}
这在现代浏览器中都是有效的。 但是混杂模式中的IE5.x和IE6不支持margin：auto声明。 但是IE将text-align:center误认为是让所有的东西居中，而不只是文本。 这一点是可以利用的。
body{
text-align:center;
}
.wrapper{
width:920px;
margin:0 auto;
text-align:center;
}
以这种方式使用text-align的属性是一种hack， 但是这个hack是无害的， 对代码没有严重的影响。
8.3 基于浮动的布局
基于浮动的布局是最容易的也是最可靠的。 顾名思义，在基于浮动的不居中，只需设置希望定位的元素的宽度，然后将它们向左或者向右浮动。
因为浮动的元素不占文档流中的任何空间，他们就不再对包围他们的块框产生任何影响。 为了解决这个问题要对不居中各个点上的浮动元素进行清理。
非常常见的做法不是连续的浮动和清理元素，而是浮动几乎所有的东西，然后在整个文档的“战略点”上进行一次或者两次清理。 还可以使用溢出的方法清理某些元素的内容。 这是作者目前最喜欢的方法，所以在以后的示例中都是用这种方法。
8.3.1 两列的浮动布局
要在内容区创建一个两列的布局首先要创建一个基本的HTML标记。
<div class="content">
<div class="primary">
<!--main content gose here-->
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
这个设计的次要内容区域将位于页面的左边，主要内容位于页面的右边。 但是为了提高易用性和可访问性，选择在源代码中将主要内容放在前面。 在一般都是用向左或向右浮动的时候，布局会显得很紧密，稍微有一点点的额变动就睡出现浮动换行掉落下面的IEbug所以，可以使一个元素向左浮动一个元素向右浮动的方法在中间创建水平的隔离带。 如果一个元素增加了几个像素不会立刻占满水平空间而是扩展到视觉隔离带中。如图所示：
实现这个布局的CSS很简单，只需要唯美格列设置想要的宽度，还需要在主内容中添加一点内边距。 以避免其中紧挨的文本元素的右边缘。。注意，所有的元素都添加了display:inline。 这个预防措施来防止IE的双外边距浮动产生的bug。
.content .primary{
width:650px;
padding-right:20px;
float:right;
dispaly:inline;
}
.content .secondary{
width:230px;
float:left;
display:inline;
}
/*因为这些元素都是浮动的，不在文档流中占据任何空间，这会导致页脚向上升。 为了避免这种情况要对他们的父元素引用溢出的方法，从而清理浮动元素*/
.content {
overflow:hidden;
width:920px;
background-color:#999;
}
D:\asp1\cssexample\两列的浮动布局.html
8.3.2 三列的浮动布局
创建三列的布局所需的HTML和创建两列的HTML非常相似，唯一的差别实在内容的 div中添加了两个新的div ； 一个用于主内容一个应用于次内容。 因此可以灵活的重用primary和secondary类名。
<div class="content">
<div class="primary">
<div class="primary">
<!--main content gose here-->
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
可以使用两列技术相同的CSS，将此要内容向左浮动将主要内容向右浮动， 然后再主内容div中将主内容div向左浮动，将次内容向右浮动。 其实就是将主内容区域分成两块从而形成三列的效果。
.content{
width:920px;
margin:0 auto;
overflow:hidden;/*因为这些元素都是浮动的，不在文档流中占据任何空间，这回倒是页脚向上升。 为了避免这种情况要对他们的父元素引用溢出的方法，从而清理浮动元素*/
background-color:#F96;
}
.content .primary .primary{
width:400px;
float:left;
display:inline;
}
.content .primary .secondary{
width:230px;
display:inline;
float:right;
padding-right:20px;
}
.content .primary{
float:right;
display:inline;
width:670px;/*padding removed*/
}
.content .secondary{
width:230px;
float:left;
display:inline;
}
效果：D:\asp1\cssexample\三列的浮动布局.html
8.4 固定宽度，流式和弹性布局
到目前为止，所有的示例中都是宽度亿像素为单位。 这种布局类型称为固定宽度的布局。 精确地像素单位布局会使开发人员对于页面有很强的控制能力，精确地布局虽然简单易行但是任有缺点。 无论窗口尺寸多大，他总是不变。 随着屏幕范围越来越大，固定宽度的设计越来越不适合灵活的WEB。 因此常被人为是糟糕的权宜之计。
为了解决这些问题，我们常常用流式布局或弹性布局来代替固定宽度的布局。
8.4.1 流式布局
流式布局是尺寸是由百分数而不是像素设置的，布局能够对于浏览器窗口的变化进行收缩。 流式布局会高高效的利用空间，最好的流式布局甚至不会硬气用户的注意。
但是窗口的变化页面不能无限收缩，要有极限的限制，否则难以阅读。 可以采取几个方法来避免这个问题，。 有必要添加以像素或em为单位的min-width属性，防止布局变得很窄。
相反，设计很跨浏览器的整个窗口航就变的很长，也可以用不很跨浏览器而是让容器只跨越宽度的一部分，比如85%. 还可以考虑用百分数设置内边距和外边距，这样的话可以防止列变得太宽或者太窄。最后对于非常严重的情况可以设置最大宽度。
设计时首先将容器的宽度设置为窗口的百分数，更具自己屏幕上的效果选择尺寸，这很好。 但是更精细一点可以通过查看浏览器统计数据确定常用的浏览器窗口尺寸。 例如如果设计者用的宽度为960px而大多数用户的浏览器宽度是1250px那么所使用的百分数是（960/1250）*100%=76.8%。
接下来，一容器宽度的百分数形式设置主内容区域和次内容区域的宽度， 以相似的方法算出百分数。
.wrapper{
width:76.8%;/*920px*/
margin:0 auto;
text-align:left;
}
.content .primary{
width:72.82%;/*670px*/
float:right;
display:inline;
}
.content .secondary{
width:25%/*240px*/;
float:left;
display:inline;
}
然后需要设置主内容区域中列的宽度，这需要一点技巧，因为内容div的宽度依据是主内容元素的宽度，而不是整个容器， 现在要的主（.primary .primary）div的宽度是400px,即父元素的59.7%；以相似的方法计算出次要div的宽度是34.33%、最后还有20px的槽，即父元素的2.63%。
.content .primary .primary{
width:59.7%;
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%;
padding-right:2.63%;
float:right;
display:inline;
}
最后会产生适合1250像素窗口的流式布局，屏幕分辨率更大或者更小时阅读起来也比较舒服。
D:\asp1\cssexample\流式布局.html
因为这个布局会适当的伸缩，所以不添加max-width属性，但是为了确保文本的长度设和阅读，最好添加以em为单位的max-width属性。 对于比较小的窗口尺寸这个布局 可能会有点挤，所以还要添加以em为单位的min-width属性：
.wrapper{
width:76.8%;
margin:0 auto;
text-align:left;
max-width:125em;
min-width:62em;}
8.4.2 弹性布局
虽然流式布局可以充分利用可用空间，但是在大分辨率的显示器上，行任然会长，让用户不舒服。相反在窄窗口中或者增加文本字号的时候，行会变的非常短。对于这个问题，弹性布局可能是一种解决方案。
弹性布局是相对于字号来设置元素的宽度。 以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大，可以将行长保持在可阅读的范围，对于实力弱的人尤其有用。
为了防止布局比浏览器窗口宽，水平滚条出现的这种情况，我们需要在容器的div上添加100%的max-width。
创建弹性布局要比创建流式布局容易的多，经固定宽度的布局转换成弹性布局是相对简单的任务，技巧是设置基字号，让1em大致相当于10像素。
大多数浏览器的默认字号都是16像素，10像素大约是16像素的62.5%,所以主题上将字号设置为62.5%就可以了。
body{
font-size:62.5%;
text-align:center;
}
因为在使用默认字号时候1em相当于10像素，所以可以相当轻松的将固定宽度的布局转化为弹性布局，在本书的前一个版本中，我建议用em为单位设置所有的宽度。 但是我的同事和技术审稿人建议那内部宽度任然用百分数，只以em为单位设置容器的宽度。 这样的话内部的宽度任然是相对于字号的。 这样就可以方便的修改布局的总尺寸， 不必修改每个元素的宽度。 这种方案更灵活更容易维护。
.wrapper{
width:92em;/*920px*/;
max-width:95%;
margin:0 auto;
text-align:left;
}
其他的相对于流式布局不作变化！！
.wrapper{
width:76.8%;/*920px*/
margin:0 auto;
text-align:left;
}
.content .primary{
width:72.82%;/*670px*/
float:right;
display:inline;
}
.content .secondary{
width:25%/*240px*/;
float:left;
display:inline;
}
然后需要设置主内容区域中列的宽度，这需要一点技巧，因为内容div的宽度依据是主内容元素的宽度，而不是整个容器， 现在要的主（.primary .primary）div的宽度是400px,即父元素的59.7%；以相似的方法计算出次要div的宽度是34.33%、最后还有20px的槽，即父元素的2.63%。
.content .primary .primary{
width:59.7%;
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%;
padding-right:2.63%;
float:right;
display:inline;
}
在使用常规文本字号时这些代码产生的布局和宽度布局看起来一样，但是它会随着文本字号的增大而漂亮滴增大。
页面缩放在现代浏览器中越来越流行了，一些人觉得不需要弹性布局了，但是除非所有的浏览器都支持页面缩放，否则，还要考虑使用弹性布局。
8.4.3 流式和弹性图像
如果选用流式或弹性布局，那么固定的宽度图像就会对设计产生强烈的影响。 当布局宽度减小时，图像会相对他移动，可能对彼此产生消极影响。 图形回忆自然地最小宽度显示，从而防止某些元素的尺寸减少，有些图像会超出他们的元素，从而破坏精心调整的设计。 增加布局的宽度也会产生戏剧性的结果， 形成空隙过大，不平衡的设计。 但是不必担心有几个办法可以避免这些问题。
对于需要夸大区域的图像，可以考虑用背景的图形而不是图像元素。随着branding元素的伸缩，背景图像或多多少会漏出来一些：
#branding {
height:171px;
background:url() no-repeat left top;
}
<div id="branding"></div>
如果图像需要用作页面上的图形元素，那么将容器的元素设置为100%并将overflow属性设置为hidden。 这样的话图像的右边会被截断，使它适合branding的元素而不会随着布局伸缩：
#branding{
width:100%;
overflow:hidden;
}
<div id="branding">
<img src="img/branding.png" width="1600" height="171"/>
</div>
对于常规的内容图形你可能希望他们垂直或水平伸缩避免被剪切。因此可以将图像元素添加到没有任何尺寸的页面上。然后通过设置图形的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真。
假如你想让图约占框的四分之一，文本占据uxiade空间。 为此图像的宽度设置为25%，然后用max-width设置最大宽度避免失真。
.news img{
width:25%;
max-width:200px;
float:left;
display:inline;
padding:2%;
}
.news p{
width:68%;
float:right;
display:inline;
padding:2% 2% 2% 0;
}
效果：D:\asp1\cssexample\流式和弹性图像.html 《Firefox的浏览器》xiaoguo更好
随着news元素的扩展或收缩，图像和文本段落也会扩展和收缩，从而保持视觉上的平衡， 但是图像不会超过他的的实际尺寸。
8.5 Faux列
1.固定宽度的faux列
创建列的效果，需要创建一个伪列。 方法是在一个占据最大高度的元素上应用重复的背景图像。 对于固定宽度的两列布局，只需在容器元素上应用一个垂直充重复的背景图像。
#wrapper{
background:#fff url(....) repeat-y left top;
}
对于三列布局使用同样的方法：按照一样的方式应用这个图形，就会形成漂亮的faux三列效果。
D:\asp1\cssexample\Faux列.html
2.流式布局的Faux列
为固定宽度的设计创建faux列非常容易，因为我们知道列的尺寸和位置。 为流式布局创建faux列就麻烦了。 因为尺寸的位置随着浏览器的窗口而变化。 建立流式faux布局的技巧是用百分比对背景图形进行定位。
8.6 高度相等的列
创建高度相等的列，用表格很容易就能实现这种效果，但是用css还需要一点技巧。在陈刚编著的《CSS标准网页布局开发指南》 清华出版社 中有各种高度宽度自相适应的布局， 就是高度相等的列，但是在这本书：《精通css 高级web标准解决方案》Andy Budd的书中实现方法和前面的不同，我觉得这是个更高级一点的方法。
先来看看标记：
<body>
<div class="wrapper">
<div class="box">
<h1>第一列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>第二列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>第三列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
</div>
</body>
对于这个示例，需要三个div，在每个div中有标题内容和一个空的div。 这个空的div是作为递交图片的钩子。
现在开始给框设置样式：
.wrapper{
width:100%;/*这里要是设置的小了，第三列就掉下去了，其实可以改为流式弹性图像*/
overflow:hidden;
margin:0 auto;
position:relative;
}
这种技术的关键是给每个框设置大的低内边距，然后使用数值相似的负外边距消除这个高度。 这会导致每个列溢出容器元素。 然后把容器的overflow属性设置为hidden，列就在最高点被截断。
.box{
width:250px;
padding：20px;
margin-bottom:-990px;
margin-left:20px;
float:left;
display:inline;
background: url(images/three.png) #89ac10 top left no-repeat;
}
.wrapper .box p{
padding-bottom:1000px;/*给每个框设置大的底内边距， 目的是为了使三列统统加长，然后用相似的负的外边距消除这个高度*/
}
为了把底边定位在正确的位置，需要让他们与容器的底部对齐。 为此首先把容器的position属性设置为relative。 然后把空的div的position属性设置为absolute。 把他们的bottom属性设置为零。 现在只需要正确的高度和宽度。
.bottom{
position:absolute;
bottom:0;/*wrapper底部的位置*/
height:20px;
width:290px;
background:url(images/three-bottom.png) no-repeat #89ac10 bottom left;
margin-left:-20px;
}
结果是一个高度与最长列相等的三列布局：D:\asp1\cssexample\高度相同的列Andy-Budd版.html
8.7 CSS 3列
CSS 3也可以创建等高的文本列， 要通过column-count、column-width、column-gap属性实现， 如果你念了一点英语，这个就不说了。
<h1>Scorates</h1>
<div class="col">
<p>...</p>
</div>
创建一个三列布局，内个列宽度为14em，列之间有2em的间距，CSS列的优点之一是可用空间小于已定义列的宽度时的处理方式是列不会像浮动那样回绕，但是会减少列数。 因此，空间不够显示三列，则会显示两列。
目前对于此CSS的支持的浏览器还不广泛。 因此除了常规的代码，还要用特定浏览器的相关扩展。
目前只有Firefox浏览器支持。D:\asp1\cssexample\CSS 3 三列布局.html
8.8 CSS框架与CSS系统
再编程领域，Rails或Django等框架采用的是常见的Web开发模式(比如在数据库中添加记录)，并把这些模式抽象成简单的可重用组件，让开发人员可以便捷的开发相当复杂的应用，不需要重新开发这些功能。 与独立函数库不同，框架的功能往往很全面。而且框架的抽象程度很高，所以开发人员不需要了解底层的语言，也能构建完整的应用程序。
近几年除了所谓的CSS框架，这些框架的目标是简化CSS的使用，方便用户创建各种常用的布局，而不需要编辑底层的CSS。 框架鼓励CSS开发人员使用一系列标记模式和命名约定，然后在幕后管理布局。
现在最受欢迎的三个框架是YUI Grids ，Blueprint和960， 还有一些其他的框架。
框架提供了许多有助于提高生产力的特性，包括全局reset样式、全站点范围的排版处理和意志的表单处理， 大多数醒目需要这些特性。 但是框架也会改变编写标记的方式，破坏表现和意义的分离。
如果使用框架控制布局，开发人员不得不使用表现性的标记。
框架的另一个缺点是，他们要求在设计中必须使用他定的网格结构。 如果你使用某个框架，你可能会在每个项目中都是用它，因此思维方式也会逐渐的僵化。 正如俗话所说的，如果你有一把锤子那么什么东西都看起来像钉子。
但是大多数的框架是针对特定的站点设计的，而不是作为任何设计的灵活的布局系统从头设计的。 但是框架系统设计的站点还是能够看出来原来站点的痕迹。
CSS系统是可以享有框架的生产力而避免其缺点的一个工具箱， 包括 全局reset 样式排版 表单处理 登录表单 日历表格 导航列表等常用的HTML组件，包含客户需要的各种布局选项，这个过程最初会多做一些工作，但是他能提供CSS框架的优点而避免其缺点。
最后了解到了CSS框架固有的缺点和开发自己的CSS系统的重要性。
CSS的主要好处之一是，他能过控制页面布局 而不需要表现性标记。 但是css布局被认为是难以理解的。 似乎每一个css作者都用自己的技术创建多列布局，而CSS开发人员常常不了解真正所用的技术的工作原理。 所谓的CSS 框架的出现进一步恶化了这种局面。 CSS框架试图在标记和表现之间建立强耦合来简化css的布局， 这种耦合式我们真正抛弃基于表格布局的主要原因。 这种CSS布局以“黑盒子”的让人迅速的到想要得到的结果， 但是最终阻碍了开发人员理解这种语言和修改的能力。
所有的CSS布局的根本都是有3个基本概念：定位、浮动、和外边距操纵。 这些CSS布局技术其实没有本质的区别，只要理解了核心概念，创建自己的布局是相当容易的。
在本章中，你即将学习：
让设计在页面中水平居中
创建两列和三列基于浮动的布局
创建固定宽度，流式和弹性布局
创建高度相等的咧
CSS框架和css系统
8.1 计划布局
当开始把设计转化成功能完整的模板时，设计者往往很想马上开始编写页面和处理图像。 但是这很快就会遇到麻烦，先做一点计划可以避免很多问题。正如俗话说的“要三思而后行”。
要想创建出可伸缩而且容易维护的CSS系统，首先应该检查设计，寻找出重复的模式。 这包括结构中的模式和在站点元素中反复出现的方式。 在这个阶段，不应该太关注表现方式，而是应该关注结构和意义。
先把页面分成大的结构性的区域，比如 容器、页眉、内容区域和页脚。
然后将注意力转化到内容区域本身，开始建立网格结构。设计有多少内容区域，他们有什么差异？ 所以现在应该寻找的是共同特征而不是视觉表现。
最后，在各个内容区域寻找不同的布局结构。 将这些结构与前一步相结合就能形成每个页面的结构计划。 现在拿起绘图笔和尺子，开始详细的设计结构和尺寸。
结构设计完成以后，现在可以开始关注不同类型的内容。 让每一个内容唤起一个有意义的名字， 然后分析他们的关系， 进行分类。
再看看不同的类型中是否有共同的模式。 对于页眉和页脚，错误消息、菜单项，搜索项也是这样。 应该尽量采取一般的类名，然后根据上下文应用样式。
找出模式并确定命名约定后，最好马上开始定义将使用的元素，这样是最好的。 文章可能是一个div，其中包含h2,段落课锚元素。提前定义比随时添加容易的多。 随时记下颜色编码，尺寸等信息，在开发阶段会有帮助。
8.2 设置基本结构
假设我们要开发一个典型的三列博客模板，如图：
通过分析发现，我们需要一个容器元素让设计居中，其中包含页眉，内容区域和页脚，因此标记应该像这样一样：
<body>
<div class="warpper">
<div class="header">
<!--head content gose here-->
</div>
<div class="content">
<!--page content gose here-->
</div>
<div class="footer">
<!--footer content gose here-->
</div>
<body>
然后三个区域放在容器中，我们先设置容器元素的样式。
使用外边距让设计居中
长文本行阅读起来很困难，让人讨厌。 现代显示器越来越大， 屏幕可读性问题变得越来越重要。 环节这个问题的一种方法是让设计居中。
假设有一个典型的布局，希望在其中的容器的div在屏幕上水平居中：
<body>
<div class="warpper">
</div>
</body>
为此只需要定义容器div的宽度，然后水平外边距设置为auto：
.warpper{
width:920px;
margin:0 auto;
}
这在现代浏览器中都是有效的。 但是混杂模式中的IE5.x和IE6不支持margin：auto声明。 但是IE将text-align:center误认为是让所有的东西居中，而不只是文本。 这一点是可以利用的。
body{
text-align:center;
}
.wrapper{
width:920px;
margin:0 auto;
text-align:center;
}
以这种方式使用text-align的属性是一种hack， 但是这个hack是无害的， 对代码没有严重的影响。
8.3 基于浮动的布局
基于浮动的布局是最容易的也是最可靠的。 顾名思义，在基于浮动的不居中，只需设置希望定位的元素的宽度，然后将它们向左或者向右浮动。
因为浮动的元素不占文档流中的任何空间，他们就不再对包围他们的块框产生任何影响。 为了解决这个问题要对不居中各个点上的浮动元素进行清理。
非常常见的做法不是连续的浮动和清理元素，而是浮动几乎所有的东西，然后在整个文档的“战略点”上进行一次或者两次清理。 还可以使用溢出的方法清理某些元素的内容。 这是作者目前最喜欢的方法，所以在以后的示例中都是用这种方法。
8.3.1 两列的浮动布局
要在内容区创建一个两列的布局首先要创建一个基本的HTML标记。
<div class="content">
<div class="primary">
<!--main content gose here-->
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
这个设计的次要内容区域将位于页面的左边，主要内容位于页面的右边。 但是为了提高易用性和可访问性，选择在源代码中将主要内容放在前面。 在一般都是用向左或向右浮动的时候，布局会显得很紧密，稍微有一点点的额变动就睡出现浮动换行掉落下面的IEbug所以，可以使一个元素向左浮动一个元素向右浮动的方法在中间创建水平的隔离带。 如果一个元素增加了几个像素不会立刻占满水平空间而是扩展到视觉隔离带中。如图所示：
实现这个布局的CSS很简单，只需要唯美格列设置想要的宽度，还需要在主内容中添加一点内边距。 以避免其中紧挨的文本元素的右边缘。。注意，所有的元素都添加了display:inline。 这个预防措施来防止IE的双外边距浮动产生的bug。
.content .primary{
width:650px;
padding-right:20px;
float:right;
dispaly:inline;
}
.content .secondary{
width:230px;
float:left;
display:inline;
}
/*因为这些元素都是浮动的，不在文档流中占据任何空间，这会导致页脚向上升。 为了避免这种情况要对他们的父元素引用溢出的方法，从而清理浮动元素*/
.content {
overflow:hidden;
width:920px;
background-color:#999;
}
D:\asp1\cssexample\两列的浮动布局.html
8.3.2 三列的浮动布局
创建三列的布局所需的HTML和创建两列的HTML非常相似，唯一的差别实在内容的 div中添加了两个新的div ； 一个用于主内容一个应用于次内容。 因此可以灵活的重用primary和secondary类名。
<div class="content">
<div class="primary">
<div class="primary">
<!--main content gose here-->
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
<div class="secondary">
<!--navigation and secondlary content gose here-->
</div>
</div>
可以使用两列技术相同的CSS，将此要内容向左浮动将主要内容向右浮动， 然后再主内容div中将主内容div向左浮动，将次内容向右浮动。 其实就是将主内容区域分成两块从而形成三列的效果。
.content{
width:920px;
margin:0 auto;
overflow:hidden;/*因为这些元素都是浮动的，不在文档流中占据任何空间，这回倒是页脚向上升。 为了避免这种情况要对他们的父元素引用溢出的方法，从而清理浮动元素*/
background-color:#F96;
}
.content .primary .primary{
width:400px;
float:left;
display:inline;
}
.content .primary .secondary{
width:230px;
display:inline;
float:right;
padding-right:20px;
}
.content .primary{
float:right;
display:inline;
width:670px;/*padding removed*/
}
.content .secondary{
width:230px;
float:left;
display:inline;
}
效果：D:\asp1\cssexample\三列的浮动布局.html
8.4 固定宽度，流式和弹性布局
到目前为止，所有的示例中都是宽度亿像素为单位。 这种布局类型称为固定宽度的布局。 精确地像素单位布局会使开发人员对于页面有很强的控制能力，精确地布局虽然简单易行但是任有缺点。 无论窗口尺寸多大，他总是不变。 随着屏幕范围越来越大，固定宽度的设计越来越不适合灵活的WEB。 因此常被人为是糟糕的权宜之计。
为了解决这些问题，我们常常用流式布局或弹性布局来代替固定宽度的布局。
8.4.1 流式布局
流式布局是尺寸是由百分数而不是像素设置的，布局能够对于浏览器窗口的变化进行收缩。 流式布局会高高效的利用空间，最好的流式布局甚至不会硬气用户的注意。
但是窗口的变化页面不能无限收缩，要有极限的限制，否则难以阅读。 可以采取几个方法来避免这个问题，。 有必要添加以像素或em为单位的min-width属性，防止布局变得很窄。
相反，设计很跨浏览器的整个窗口航就变的很长，也可以用不很跨浏览器而是让容器只跨越宽度的一部分，比如85%. 还可以考虑用百分数设置内边距和外边距，这样的话可以防止列变得太宽或者太窄。最后对于非常严重的情况可以设置最大宽度。
设计时首先将容器的宽度设置为窗口的百分数，更具自己屏幕上的效果选择尺寸，这很好。 但是更精细一点可以通过查看浏览器统计数据确定常用的浏览器窗口尺寸。 例如如果设计者用的宽度为960px而大多数用户的浏览器宽度是1250px那么所使用的百分数是（960/1250）*100%=76.8%。
接下来，一容器宽度的百分数形式设置主内容区域和次内容区域的宽度， 以相似的方法算出百分数。
.wrapper{
width:76.8%;/*920px*/
margin:0 auto;
text-align:left;
}
.content .primary{
width:72.82%;/*670px*/
float:right;
display:inline;
}
.content .secondary{
width:25%/*240px*/;
float:left;
display:inline;
}
然后需要设置主内容区域中列的宽度，这需要一点技巧，因为内容div的宽度依据是主内容元素的宽度，而不是整个容器， 现在要的主（.primary .primary）div的宽度是400px,即父元素的59.7%；以相似的方法计算出次要div的宽度是34.33%、最后还有20px的槽，即父元素的2.63%。
.content .primary .primary{
width:59.7%;
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%;
padding-right:2.63%;
float:right;
display:inline;
}
最后会产生适合1250像素窗口的流式布局，屏幕分辨率更大或者更小时阅读起来也比较舒服。
D:\asp1\cssexample\流式布局.html
因为这个布局会适当的伸缩，所以不添加max-width属性，但是为了确保文本的长度设和阅读，最好添加以em为单位的max-width属性。 对于比较小的窗口尺寸这个布局 可能会有点挤，所以还要添加以em为单位的min-width属性：
.wrapper{
width:76.8%;
margin:0 auto;
text-align:left;
max-width:125em;
min-width:62em;}
8.4.2 弹性布局
虽然流式布局可以充分利用可用空间，但是在大分辨率的显示器上，行任然会长，让用户不舒服。相反在窄窗口中或者增加文本字号的时候，行会变的非常短。对于这个问题，弹性布局可能是一种解决方案。
弹性布局是相对于字号来设置元素的宽度。 以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大，可以将行长保持在可阅读的范围，对于实力弱的人尤其有用。
为了防止布局比浏览器窗口宽，水平滚条出现的这种情况，我们需要在容器的div上添加100%的max-width。
创建弹性布局要比创建流式布局容易的多，经固定宽度的布局转换成弹性布局是相对简单的任务，技巧是设置基字号，让1em大致相当于10像素。
大多数浏览器的默认字号都是16像素，10像素大约是16像素的62.5%,所以主题上将字号设置为62.5%就可以了。
body{
font-size:62.5%;
text-align:center;
}
因为在使用默认字号时候1em相当于10像素，所以可以相当轻松的将固定宽度的布局转化为弹性布局，在本书的前一个版本中，我建议用em为单位设置所有的宽度。 但是我的同事和技术审稿人建议那内部宽度任然用百分数，只以em为单位设置容器的宽度。 这样的话内部的宽度任然是相对于字号的。 这样就可以方便的修改布局的总尺寸， 不必修改每个元素的宽度。 这种方案更灵活更容易维护。
.wrapper{
width:92em;/*920px*/;
max-width:95%;
margin:0 auto;
text-align:left;
}
其他的相对于流式布局不作变化！！
.wrapper{
width:76.8%;/*920px*/
margin:0 auto;
text-align:left;
}
.content .primary{
width:72.82%;/*670px*/
float:right;
display:inline;
}
.content .secondary{
width:25%/*240px*/;
float:left;
display:inline;
}
然后需要设置主内容区域中列的宽度，这需要一点技巧，因为内容div的宽度依据是主内容元素的宽度，而不是整个容器， 现在要的主（.primary .primary）div的宽度是400px,即父元素的59.7%；以相似的方法计算出次要div的宽度是34.33%、最后还有20px的槽，即父元素的2.63%。
.content .primary .primary{
width:59.7%;
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%;
padding-right:2.63%;
float:right;
display:inline;
}
在使用常规文本字号时这些代码产生的布局和宽度布局看起来一样，但是它会随着文本字号的增大而漂亮滴增大。
页面缩放在现代浏览器中越来越流行了，一些人觉得不需要弹性布局了，但是除非所有的浏览器都支持页面缩放，否则，还要考虑使用弹性布局。
8.4.3 流式和弹性图像
如果选用流式或弹性布局，那么固定的宽度图像就会对设计产生强烈的影响。 当布局宽度减小时，图像会相对他移动，可能对彼此产生消极影响。 图形回忆自然地最小宽度显示，从而防止某些元素的尺寸减少，有些图像会超出他们的元素，从而破坏精心调整的设计。 增加布局的宽度也会产生戏剧性的结果， 形成空隙过大，不平衡的设计。 但是不必担心有几个办法可以避免这些问题。
对于需要夸大区域的图像，可以考虑用背景的图形而不是图像元素。随着branding元素的伸缩，背景图像或多多少会漏出来一些：
#branding {
height:171px;
background:url() no-repeat left top;
}
<div id="branding"></div>
如果图像需要用作页面上的图形元素，那么将容器的元素设置为100%并将overflow属性设置为hidden。 这样的话图像的右边会被截断，使它适合branding的元素而不会随着布局伸缩：
#branding{
width:100%;
overflow:hidden;
}
<div id="branding">
<img src="img/branding.png" width="1600" height="171"/>
</div>
对于常规的内容图形你可能希望他们垂直或水平伸缩避免被剪切。因此可以将图像元素添加到没有任何尺寸的页面上。然后通过设置图形的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真。
假如你想让图约占框的四分之一，文本占据uxiade空间。 为此图像的宽度设置为25%，然后用max-width设置最大宽度避免失真。
.news img{
width:25%;
max-width:200px;
float:left;
display:inline;
padding:2%;
}
.news p{
width:68%;
float:right;
display:inline;
padding:2% 2% 2% 0;
}
效果：D:\asp1\cssexample\流式和弹性图像.html 《Firefox的浏览器》xiaoguo更好
随着news元素的扩展或收缩，图像和文本段落也会扩展和收缩，从而保持视觉上的平衡， 但是图像不会超过他的的实际尺寸。
8.5 Faux列
1.固定宽度的faux列
创建列的效果，需要创建一个伪列。 方法是在一个占据最大高度的元素上应用重复的背景图像。 对于固定宽度的两列布局，只需在容器元素上应用一个垂直充重复的背景图像。
#wrapper{
background:#fff url(....) repeat-y left top;
}
对于三列布局使用同样的方法：按照一样的方式应用这个图形，就会形成漂亮的faux三列效果。
D:\asp1\cssexample\Faux列.html
2.流式布局的Faux列
为固定宽度的设计创建faux列非常容易，因为我们知道列的尺寸和位置。 为流式布局创建faux列就麻烦了。 因为尺寸的位置随着浏览器的窗口而变化。 建立流式faux布局的技巧是用百分比对背景图形进行定位。
8.6 高度相等的列
创建高度相等的列，用表格很容易就能实现这种效果，但是用css还需要一点技巧。在陈刚编著的《CSS标准网页布局开发指南》 清华出版社 中有各种高度宽度自相适应的布局， 就是高度相等的列，但是在这本书：《精通css 高级web标准解决方案》Andy Budd的书中实现方法和前面的不同，我觉得这是个更高级一点的方法。
先来看看标记：
<body>
<div class="wrapper">
<div class="box">
<h1>第一列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>第二列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>第三列标题</h1>
<p>.......</p>
<div class="bottom"></div>
</div>
</div>
</body>
对于这个示例，需要三个div，在每个div中有标题内容和一个空的div。 这个空的div是作为递交图片的钩子。
现在开始给框设置样式：
.wrapper{
width:100%;/*这里要是设置的小了，第三列就掉下去了，其实可以改为流式弹性图像*/
overflow:hidden;
margin:0 auto;
position:relative;
}
这种技术的关键是给每个框设置大的低内边距，然后使用数值相似的负外边距消除这个高度。 这会导致每个列溢出容器元素。 然后把容器的overflow属性设置为hidden，列就在最高点被截断。
.box{
width:250px;
padding：20px;
margin-bottom:-990px;
margin-left:20px;
float:left;
display:inline;
background: url(images/three.png) #89ac10 top left no-repeat;
}
.wrapper .box p{
padding-bottom:1000px;/*给每个框设置大的底内边距， 目的是为了使三列统统加长，然后用相似的负的外边距消除这个高度*/
}
为了把底边定位在正确的位置，需要让他们与容器的底部对齐。 为此首先把容器的position属性设置为relative。 然后把空的div的position属性设置为absolute。 把他们的bottom属性设置为零。 现在只需要正确的高度和宽度。
.bottom{
position:absolute;
bottom:0;/*wrapper底部的位置*/
height:20px;
width:290px;
background:url(images/three-bottom.png) no-repeat #89ac10 bottom left;
margin-left:-20px;
}
结果是一个高度与最长列相等的三列布局：D:\asp1\cssexample\高度相同的列Andy-Budd版.html
8.7 CSS 3列
CSS 3也可以创建等高的文本列， 要通过column-count、column-width、column-gap属性实现， 如果你念了一点英语，这个就不说了。
<h1>Scorates</h1>
<div class="col">
<p>...</p>
</div>
创建一个三列布局，内个列宽度为14em，列之间有2em的间距，CSS列的优点之一是可用空间小于已定义列的宽度时的处理方式是列不会像浮动那样回绕，但是会减少列数。 因此，空间不够显示三列，则会显示两列。
目前对于此CSS的支持的浏览器还不广泛。 因此除了常规的代码，还要用特定浏览器的相关扩展。
目前只有Firefox浏览器支持。D:\asp1\cssexample\CSS 3 三列布局.html
8.8 CSS框架与CSS系统
再编程领域，Rails或Django等框架采用的是常见的Web开发模式(比如在数据库中添加记录)，并把这些模式抽象成简单的可重用组件，让开发人员可以便捷的开发相当复杂的应用，不需要重新开发这些功能。 与独立函数库不同，框架的功能往往很全面。而且框架的抽象程度很高，所以开发人员不需要了解底层的语言，也能构建完整的应用程序。
近几年除了所谓的CSS框架，这些框架的目标是简化CSS的使用，方便用户创建各种常用的布局，而不需要编辑底层的CSS。 框架鼓励CSS开发人员使用一系列标记模式和命名约定，然后在幕后管理布局。
现在最受欢迎的三个框架是YUI Grids ，Blueprint和960， 还有一些其他的框架。
框架提供了许多有助于提高生产力的特性，包括全局reset样式、全站点范围的排版处理和意志的表单处理， 大多数醒目需要这些特性。 但是框架也会改变编写标记的方式，破坏表现和意义的分离。
如果使用框架控制布局，开发人员不得不使用表现性的标记。
框架的另一个缺点是，他们要求在设计中必须使用他定的网格结构。 如果你使用某个框架，你可能会在每个项目中都是用它，因此思维方式也会逐渐的僵化。 正如俗话所说的，如果你有一把锤子那么什么东西都看起来像钉子。
但是大多数的框架是针对特定的站点设计的，而不是作为任何设计的灵活的布局系统从头设计的。 但是框架系统设计的站点还是能够看出来原来站点的痕迹。
CSS系统是可以享有框架的生产力而避免其缺点的一个工具箱， 包括 全局reset 样式排版 表单处理 登录表单 日历表格 导航列表等常用的HTML组件，包含客户需要的各种布局选项，这个过程最初会多做一些工作，但是他能提供CSS框架的优点而避免其缺点。
最后了解到了CSS框架固有的缺点和开发自己的CSS系统的重要性。