CSS布局的核心三要素：定位，浮动和外边距操纵。

一、计划布局

把页面划分为大得结构区域。容器，页眉，页脚，内容。
内容区域本身，建立网格区域。
在不同的内容中寻找合适的布局。
拿起绘图纸和彩铅，详细设计结构和尺寸
关注内容块的关系，结构，模式
找出模式，约定命名，定义使用的元素
记下颜色编码，尺寸信息。在打印的设计稿上批注。

二、基于浮动的布局

浮动布局最简单且可靠。
两步实现：1.设定浮动元素宽度；2.设置向左或向右浮动。
tips:
浮动所有元素，在整个文档的footer进行clear.

2.1两列的浮动布局

一列左浮动，一列右浮动
<pre>
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局</title>
<style type="text/css">

.content .primary{
    width:              650px;
    padding-right:      20px;
    float:              right;
    display:            inline;/*防止IE中双外边框浮动产生的bug*/
}

.content .secondary{
    width:              230px;
    float:              left;
    display:            inline;/*防止IE中双外边框浮动产生的bug*/
}
.content{
    overflow:           hidden;
}

</style>

</head>
<body>
<div class="wrapper">

<header>
<p>This is my header</p>
</header>

<div class="primary">
<p>Primery</p>
</div>

<div class="secondary">
<p>Secondary</p>
</div>
</div>

<footer>
<p>This is my footer</p>
</footer>
</div>

</body>
</html>
`
</pre>

2.2三列的浮动布局

两个content左右浮动，一个content中的两个内容再一次左右浮动。
与两列布局类似

三、固定宽度、流式和弹性布局

width以像素为单位，称为固定宽度布局

Chapter 7 布局