Css布局的核心概念：定位、浮动、外边距
思路：
（1） 先把页面划分为大的结构性区域，如容器、页眉、内容区域、页脚。
（2） 然后，关注内容区域本身，开始建立网格结构。关注与内容区域的共同特征与不同的特征。
（3） 接着，在内容区域中寻找不同的布局结构。
（4） 结构设计完之后，关注不同类型的内容。给每一个内容块起一个有意义的名称，然后分析它们的关系。
（5） 查看每个内容块的结构，看看不同的类型中是否有共同的模式。
（6） 找出模式并确定命名约定之后，定义需要使用的元素。
1 设置基本的结构
如三列博客模板
Css布局有几种不同的方式，包含绝对定位和使用负的外边距值。其中，浮动布局最常用。
2 基于浮动的布局
浮动布局之后需要清理浮动元素带来的负面性。
（1） 两列的浮动布局
一般讲两列都向左浮动，然后利用外边距或内边距在两列之间创建一个隔离带。但由于IE考虑元素内容的尺寸而不是元素本身的尺寸，可能打乱布局。在符合标准的浏览器中，若元素的内容太大，会超出框之外。在IE上，若元素的内容太大，整个 元素就会扩展。可能导致两列不能并排。
为了防止上述情况发生，需要避免浮动布局在包含它们的元素中太挤。可以让一个元素左浮动，一个元素右浮动，创建视觉上的隔离。并在主内容添加一点内边距，避免包含的文本紧挨着元素的右边缘。如果一个元素的尺寸意外的增加了几个像素，也不会立刻占满水平空间并下降，而只是扩展到视觉隔离带中。
<style type="text/css">
.content .primary{
float:right;
display: inline;/*//防止IE中的双边距浮动产生的bug*/
650px;
padding-right: 20px;
background: #B373DA;
}
.content .secondary{
float:left;
display:inline; /*//防止IE中的双边距浮动产生的bug*/
230px;
background: cornflowerblue;
}
.content{
overflow: hidden;/*/清理浮动*/
}
</style>
<div class="content">
<div class="primary">
primary
</div>
<div class="secondary">
secondary
</div>
</div>
（2） 三列的浮动布局
三列布局，内容div中包含两个div：一个用于主内容，一个用于次内容。次要内容向左浮动，主要内容向右浮动。在主要内容中，主div向左浮动，次要div向右浮动。
<style type="text/css">
.content .primary{
float:right;
display: inline;
670px;
background: #cccccc;
}
.content .secondary{
float:left;
display:inline;
230px;
background: blueviolet;
}
.content .primary .primary{
float:left;
display: inline;
400px;
background: #74DEF8;
}
.content .primary .secondary{
float:right;
display: inline;
padding-right: 20px;
230px;
background: chartreuse;
}
</style>
<div class="content">
<div class="primary">
<div class="primary">
11
</div>
<dv class="secondary">
12
</dv>
</div>
<div class="secondary">
2
</div>
</div>
3 固定宽度、流式、弹性布局
（1） 流式布局(百分比布局)
流式布局的尺寸是百分数而不是像素设置，这使得流式布局能够相对于浏览器窗口进行伸缩。流式布局在窗口很窄的时候，也很难阅读。因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。
如果设计横跨整个浏览器，行很很长，也影响阅读。因此，可以选择不要横跨浏览器而是让容器只跨越宽度的一部分，如86%；或者选择用百分数设置内边距和外边距；或者可以选择为容器设置最大宽度，防止内容在大显示器上变得过宽。
流式三列布局：首先将容器宽度设置为窗口总宽度的百分数。然后根据固定版本宽度与这个尺寸的比例，选择容器百分数。接着，以容器宽度的百分数形式设置主内容区域与次要内容区域的宽度。
<style type="text/css">
.wrapper{
margin:0 auto;
76.8%;
text-align:left;
}
.content .primary{
float:right;
display: inline;
72.82%;
background: #cccccc;
}
.content .secondary{
float:left;
display:inline;
25%;
background: blueviolet;
}
.content .primary .primary{
float:left;
display: inline;
59.7%;
background: #74DEF8;
}
.content .primary .secondary{
float:right;
display: inline;
padding-right: 2.63%;
34.33%;
background: chartreuse;
}
</style>
<div class="wrapper">
<div class="content">
<div class="primary">
<div class="primary">
11
</div>
<dv class="secondary">
12
</dv>
</div>
<div class="secondary">
2
</div>
</div>
</div>
ps：流式布局可以充分利用可用空间，但在大分辨率显示器上，行仍然会过长，让用户不舒服。如果在窄窗口中或增加文本字号时，行会变得非常短，内容很零碎。由此引出了弹性布局。
（2） 弹性布局
弹性布局相对于字号来设置元素的宽度。以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大，这可以保持在可阅读的范围，对于视力弱或者有认知障碍的人更为有用。因为在文本字号增加时整个布局会增大，弹性布局相比于浏览器窗口宽，导致水平滚动条出现。为了防止这种情况，可能需要在容器div上设置100%的max-width。
将固定布局转换为弹性布局，需要设置基字号，让1em大致相当于10像素。大多数浏览器上的默认字号是16像素，10像素大致相当于16像素的62.5%，所以在主体上将字号设置为62.5%即可。
<style type="text/css">
body{
font-size:62.5%;
text-align:center;
}
.wrapper{
92em;
max-95%;
margin:0 auto;
text-align:left;
}
.content .primary{
float:right;
display: inline;
72.82%;
background: #cccccc;
}
.content .secondary{
float:left;
display:inline;
25%;
background: blueviolet;
}
.content .primary .primary{
float:left;
display: inline;
59.7%;
background: #74DEF8;
}
.content .primary .secondary{
float:right;
display: inline;
padding-right: 2em;
34.33%;
background: chartreuse;
}
</style>
<div class="wrapper">
<div class="content">
<div class="primary">
<div class="primary">
11
</div>
<dv class="secondary">
12
</dv>
</div>
<div class="secondary">
2
</div>
</div>
</div>
（3） 流式和弹性图像
如果选择流式或弹性布局，那么固定的图像就会对效果产生影响。
解决方法：
对于需要跨越大区域的图像，如站点页眉或品牌中的图像，可以考虑使用背景图像而不是图像元素。
eg.
#header{
height:172px;
background:url(img/header.png) no-repeat left top ;
}
如果图像需要用作页面上的图像元素，那么容器元素的宽度设置为100%且将overflow属性设置为hidden。这样的话，图像右边会被截断，使其适合包含它的父元素，而不会随着布局伸缩。eg.
<style type="text/css">
#header{
100%;
overflow: hidden;
}
</style>
<div id="header">
<img src="./img/0.jpg" alt="img" width="600" height="200" />
</div>
对于常规内容图像，可能希望其垂直和水平伸缩以避免被剪切。为此可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，且添加与图像宽度相同的max-width以避免像素失真。
Eg 侧边栏为图像列，右边栏为文本列，图像的宽度需要大约是包含它的框的四分之一，文本占据剩下的空间。为此，只需将图像的宽度设置为25%，然后将max-width设置为图像的尺寸。
4 高度相等的列
给每个框设置最大的底内边距，然后用数值相似的负外边距消除这个高度。利用overflow：hidden；将溢出容器元素的最高点进行裁切。为了把列底部定位在正确的位置，需要让它们与齐容器元素（每个框最后放一个div标签）的底部对齐。首先把容器的position设置为relative，然后把空div的position设置为absolute，把它们的bottom属性设置为0.。最后只需设置正确的宽高，应用底部图片即可。
5 Css 3列
通过column-count、column-width、column-gap属性实现。
.col{
column-count:3;
column-10em;
column-gap:2em;
column-rule:1px solid #ccc;
}
源码地址：https://github.com/sunshineqt/exercise/tree/master/exercise/test1/layout