写在前面：
页面布局整体上可以分为两类：固定宽度（一般固定960px）；流式布局；将流式布局转换为固定布局很容易，只需要外围再包括一个div，为其设置宽度即可。
html默认的布局方式是将每个块状标签，一个一个地往上叠加，为static类型的布局。
关于BFC的参考链接：
http://www.iyunlu.com/view/css-xhtml/55.html
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
布局的一些技巧：
1）pading和margin只是一些空格而已，利用这两个属性就可以将元素移动到网页的任何位置。margin的负值能够实现很多意想不到的效果，可以详见这篇博客：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
3）对于position:absolute元素，完全脱离原来层，其在原来层实际占据高度和宽度都是0；对于position：relative元素，依旧占据原来的高度和宽度，如果设置top，left不为0就会形成窟窿。
4）对float元素设置负边距，可能导致元素上移，这是圣杯布局和双飞翼布局的根据。
4）对于浮动元素。浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。 解决方法时为包含框创建BFC环节。
其实，很多问题的本质都是对BFC（块级上下文）的理解问题
通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。
4）BFC（块级上下文）环境特性
- 解决上下元素margin重叠的问题，块级上下文会阻止上下外边距重叠，总边距就是上下边距之和
- 不和浮动元素重叠，创建了 Block Formatting Context 的元素不能与浮动元素重叠
- 闭合浮动，并且防止高度塌陷；块级上下文会width和height会包含其中的所有元素，包括浮动元素，这是利用BFC解决高度塌陷的原因
5）让浮动元素的父元素拥有BFC执行换件：
- float的值不为none。
- overflow的值不为visible，可以是hidden或者auto
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
浮动布局策略
1）除非像图片这样本身已经设置了宽度的元素，否则需要给任何浮动元素设置width（px,em或者百分比），只有这样，才能让浏览器给其他内容腾出环绕的空间。
2）要创建多列并排的效果（如两列并排），通常需要给正文添加一个大于或者等于侧边栏宽度的margin，这是因为：
ａ．因为两个列在同一个ＢＦＣ中，因此都是从包围元素的左侧开始布局，所以要求margin大于等于侧边栏的宽度；
ｂ．注意步骤ａ中设置的是margin不是padding，否则如果主列设置有背景色，依旧达不到想要的效果
ｃ．如果想要实现多列等高，通常需要为其中各列设置较大的padding-bottom值，再设置与padding-bottom一直的负margin-bottom值来达到这一效果；这是因为文档流放置的元素是考虑margin在哪里而非实际内容。同时还需要为外围元素添加overflow: hidden
下面是几个实际的案例
Ａ．创建两列布局（要求，侧边栏左浮动，主列宽度自适应，要求不管内容高度是多少，都能实现两列等高）
分析：因为要求主列自适应，主列就不能也浮动，因为元素一旦浮动都要求为其设置ｗｉｄｔｈ（百分比或者精确值）
<div class="task1">
<div class="sidebar"></div>
<div class="main"></div>
</div>
对应的布局代码如下：
.task1{
overflow: hidden;
}
.task1 .sidebar{
width:200px;
height:300px;
float:left;
background: red;
padding-bottom:400px;
margin-bottom:-400px;
}
.task1 .main{
height:500px;
background:pink;
/* padding-left:210px;*/
margin-left:210px;
padding-bottom:400px;
margin-bottom:-400px;
}
Ｂ．创建三列布局
要求：两个侧边栏一左一右浮动，主列宽度自适应，各列等高
<div class="task2">
<div class="sidebar"></div>
<div class="extra"></div>
<div class="main"></div>
</div>
对应的布局代码：
.task2{
overflow: hidden;
}
.task2 .sidebar{
width:160px;
height:300px;
background:red;
padding-bottom:400px;
margin-bottom: -400px;
float:left;
}
.task2 .main{
height:200px;
background: pink;
padding-bottom:400px;
margin-bottom:-400px;
margin-left:170px;
margin-right:210px;
}
.task2 .extra{
height:400px;
width:200px;
float:right;
background: blue;
padding-bottom: 400px;
margin-bottom: -400px;
}
根据浮动元素的排列方式，它们必须出现在环绕它们四周的所有内容之前，因此在上面的案例中，正文区域只能在左右两个侧边栏之后。
由此引发了第三个问题：
Ｃ：创建三列布局
要求（为了对搜索引擎友好，main区域要求在左右侧边栏的前面，同时main区域的宽度自适应，各列等高）
对此可以采用双飞翼布局或者圣杯布局，参见博客：
http://www.cnblogs.com/bobodeboke/p/4738768.html
3）清除浮动，clear。如果要让元素下落到左浮动对象的下方clear:left;或者右浮动对象的下方：right；对于页脚或其他需要显示在页面底部的元素，可以使用clear:both.本质上解决方法有两种：
- a:让浮动元素所在的父元素拥有BFC环境
- b：让浮动元素后面的元素清除浮动。
4)闭合浮动的方法（闭合比清除浮动更贴切）
当浮动元素高于外围元素（如div）里面其他内容时，就会从外围元素的底部凸出来，如果外围元素带有背景或者边框，这种高度塌陷情况就更加明显。解决的本质是
a）让包括浮动元素的外围元素拥有BFC环境，方法同上。
b）在外围元素的底部添加一个清除元素，此时可以：
a：在外围元素div的底部加一个清楚元素，如<br class=".clear">
d：在外围<div>中添加一些样式和类名。如.clearfix，其本质也是通过在浮动元素后面，通过：after伪类添加一个清除元素，针对ie，通过zoom触发器hasLayout
.clearfix:after{
content:"";
display:table;
clear:both;
}
.clearfix{
zoom:;
}
这些都可以强制外围块扩大到包含浮动元素。
５）防止浮动下落（float drop）
浏览器窗口显示的元素宽度并不等于它的width值，而是left/right border,left/right margin,left/right padding三者值的总和。float drop总是由于没有足够空间容纳所有列，导致有的浮动元素落到下一列造成。此时的解决方法：
（1）严格计算，所有列的总和<=100%
(2)使用box-sizing属性,如将下列代码放在css reset中
注意：clearfix解决的是浮动问题中的图片凸出，对于绝对定位中的图片凸出是没有办法的，此时只能够定义外围元素的高度
*{
-moz-box-sizing:border-box;
box-sizing:border-box;
}
还有其他属性，background-clip,background-origin的取值和box-sizing一样，有 content-box,padding-box,border-box
css响应式布局
响应式布局（RWD）结合了三大理念：
基于布局的弹性网格：响应式布局中不在使用固定布局，而使得宽度随着屏幕大小而改变。
用于图片和视频的弹性媒体：使得图片和媒体能够进行缩放，以适应不同的屏幕大小。
为不同屏幕宽度创建不同样式的css媒体查询：根据当前条件为浏览器发送不同的样式。
- 通过在<head>中添加response.js，可以让旧版IE支持媒体查询;
- 媒体查询通过引入不同的样式文件来实现，如<link href="css/small.css" rel="stylesheet" media="(max-width:580px)">
- 不过当前最通用的，还是在样式文件中嵌入媒体查询