CSS 多栏布局 固定布局 流动布局
正常情况下都应该保持元素 height 属性的默认值 auto .
多栏布局，某一栏目占的总宽度包括它的，Width，margin，padding ,border。
CSS3中，应用 box-sizing 属性之后，给盒子 添加边框和内边距都不会增大盒子，相反会导致内容变窄（像没有设置width的auto一样；）
比如 ：
如果 section 的总宽度超出，可以用4种方法处理，
- 从width中减去添加的外边距，边框和内边距的宽度和。
- 用行内的元素设定外边距，边框和内边距（行内元素不设置宽度）
- 在栏中再添加一个宽度默认值的 div，让它包含所有内容元素，然后再给这个 div 应用边框和内边距。
- section {box-sizing:border-box;}。
2：section > * {margin:0 10px;} （选择section的所有子元素，设定它们的外边距，边框和内边距）
3：浮动了栏，设定了栏宽，最好不要修改，而直接添加一个内部 div ，把padding margin border 给这个 div。
<div id="wrapper">
<nav><div class="inner"></div></nav>
<article> <div class="inner"></div></article>
<aside><div class="inner"></div> </aside>
</div>
nav {float :left; width:XZX;}
article{float :left; width:XYZ;}
aside {float :left; width:ZZY;}
nav .inner {padding:XXpx; margin:XXpx;}
article .inner {padding:XZpx XYpx; margin:XXpx;}
aside .inner {padding:ZZpx; margin:XXpx;}
4：nav {
box-sizing:border-box; }
article {
box-sizing:border-box; }
aside {box-sizing:border-box; }
即可。
IE6 和 IE7 不支持 box-sizing
属性。不过，有一个专门解决这个问题的腻子脚本（polyfill），名叫 borderBoxModel.js。
你可以使用条件注释（以便只有 IE6 和 IE7 加载）把它添加到 HTML 标记之后、结
束的</body>标签之前，以保证在加载 DOM 之后再执行该脚本：
<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->
PS：
设计一个将来可能由他人维护的动态网站时，需要考虑得更长远一些。比如，应该预见到可能
出现一些过大的元素。如果将来有一张比浮动栏更宽的图片被放到栏中，就会导致布局变宽，
而 右 边 的 栏 又 会 滑 到 下 方 。 为 此 ， 一 个 简 单 的 预 防 措 施 就 是 添 加 一 条
.inner img{max-width:100%;}
声明，以便限制图片的宽度不超过其父元素（在此就是内部 div）。
HTML 只会在单词间空格的地方换行。一些长 URL，甚至一些长单词，在栏比较窄的情况下，都会导致栏宽过大。
因此，还应该给所有栏的外包装元素应用
{word-wrap:break-word;}
声明，
流动布局：
1.用负外边距实现
解决方案是控制两个外包装,其中一个外包装threecolwrap包围所有三栏，另一个栏twocolwrap外包装只包围左栏和中栏。
把twocolwrap的margin设置为右栏（它不包括）的负值，width:100%。然后把中间栏设置margin-right 设置为右栏的值(正值)，width：auto；但是左栏要固定值。
<div id="main_wrapper">
<header>
<!-- 页眉-->
</header>
<div id="threecolwrap">/*三栏外包装（包围全部三栏） */
<div id="twocolwrap">/*两栏外包装（包围左栏和中栏） */
/*左栏*/
<nav>
<!-- 导航 -->
</nav>
/*中栏*/
<article>
<!-- 区块 -->
</article>
</div>/*结束两栏外包装（ twocolwrap） */
/*右栏*/
<aside>
<!-- 侧栏 -->
</aside>
</div>/*结束三栏外包装（ threecolwrap） */
<footer>
<!-- 页脚 -->
</footer>
</div>
* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
min-width:600px; max-width:1100px;
/*超过最大宽度时，居中布局*/
margin:0 auto;
/*背景图片默认从左上角开始拼接*/
background:url(images/bg_tile_150pxw.png) repeat-y #eee;
}
header {
padding:5px 10px;
background:#3f7ccf;
}
div#threecolwrap {
/*浮动强制它包围浮动的栏*/
float:left;
width:100%;
/*背景图片右对齐*/
background:url(images/bg_tile_210pxw.png) top right repeat-y;
}
div#twocolwrap {
/*浮动强制它包围浮动的栏*/
float:left;
width:100%;
/*把右栏拉到区块外边距腾出的位置上*/
margin-right:-210px;
}
nav {
float:left;
width:150px;
background:#f00;
padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
nav > * {margin:0 10px;}或者里面加一个div
article {
width:auto;/*不浮动*/
margin-left:150px;
/*在流动居中的栏右侧腾出空间*/
margin-right:210px;
background:#eee;
padding:20px 0;
}
*让子元素与栏边界保持一定距离*/
article > * {margin:0 20px;} 或者里面加一个div
aside {
float:left;
width:210px;
background:#ffed53;
padding:20px 0;
}
*让子元素与栏边界保持一定距离*/
aside > * {margin:0 10px;}
footer {
clear:both;
width:100%;
text-align:center;
background:#000;}
background:#000;
}
为了给右栏腾出空间，中栏 article 元素有一个 210 像素的右外边距。当然，
光有这个外边距只能把右栏再向右推 210 像素。别急，包围左栏和中栏的两栏外包
装上 210 像素的负右外边距，会把右栏拉回 article 元素右外边距（在两栏外包装内
部右侧）创造的空间内。
2.用CSS3 单元格 实现
仅仅是把三栏的display 属性设定为 table-cell 就可以了。
<nav><!-- 内容 --></nav>
<article><!-- 内容 --></article>
<aside><!-- 内容 --></aside>
和以下 CSS：
nav {display:table-cell; width:150px; padding:10px;
background:#dcd9c0;}
article {display:table-cell; padding:10px 20px;
background:#ffed53;}
aside {display:table-cell; width:210px; padding:10px;
background:#3f7ccf;}
这个简单、功能完备的布局对 IE7 和 IE6 可没有任何腻子脚本，甚至连个退化的后备方案都没有。
多行多栏布局 :
把每行用一个div盒子包起来，设置一个id，
在行内设置行内元素的width 和float （使变成一行）,
然后在行内小盒子中，增加div，以改变padding ,margin,border属性，又不会改变行内小盒子的宽度。
