1.利用css在列表靠头和末尾添加箭头：
/* 左箭头*/
ol a[rel="prev"]:before {
content: "\00AB";
padding-left: 0.5em;
}
/* 右箭头*/
ol a[rel="next"]:after {
content: "00BB";
padding-right: 0.5em;
}
2.让父元素包含浮动的子元素：
- 添加一个进行清理的元素
- 让父元素浮动，并使用某个元素进行清理
overflow：hidden
3.固定宽度，流式和弹式布局
- 固定宽度：简便，常用，不能充分利用可用空间，不灵活
- 流式布局：尺寸用百分数设置。能够相对于浏览器窗口进行伸缩。但是在窗口宽度较小的时候，行变得非常窄，有必要添加以像素或
em为单位min-width，防止布局变得过窄 - 弹性布局：以
em为单位设置元素的宽度。 - 流式和弹性图像：弹性布局使遇到图像元素，可将图像用作背景，然后容器设置100%并且将
overflow设置为hidden
4.常见bug
- 双边距浮动bug
IE 6和更低版本，使任何浮动元素的外边距加倍
解决方案：设置display：inline可修复bug - 3像素文本偏移bug
IE 5和IE 6中，当一个文本与一个浮动元素相邻时，这个bug就会表现出来：
例如：
.myFloat {
float: left;
width: 200px;
}
p {
margin-left: 200px;
}
/*
修复：
*/
p {
/*
* IE 6中，为容器设置一个小的高度，IE 6
* 和更低版本元素会不正确的扩展他们的高度，
* 设置小的高度不会影响实际高度。
*/
height: 1%;
margin-left: 0;
}
.myFloat {
margin-right: -3px;
}
如果浮动元素是图片的话，这样还不够；
图片解决方案：
p {
height: 1%;
margin-left: 0;
}
img .myFloat {
margin: 0;
}
IE6的重复字符bug
当一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。
前俩个注释没有影响，但后续每个注释会导致俩个自读重复出现。
解决：删掉注释相对容器中的绝对定位
IE 5,6的定位不够准确，需要迫使相对定位的容器拥有布局
可以用条件注释为容器设置一个小的高度，IE 6和更低版本元素会不正确的扩展他们的高度，设置小的高度
不会影响实际高度。
