标签：
一、float浮动：float：left/right/none/inherit;（inherit从父级继承浮动，对有的浏览器不兼容，一般不用）
1.块在一排显示
2.内联元素支持宽高
3.默认内容撑开宽度
4.脱离文档流（文档流是文档中可显示对象，在排列时所占用的位置）
特性：
1.浮动元素不会覆盖住任何文字或者行内标签，所有的文字或者行内标签会环绕在浮动元素周围
2.浮动元素会覆盖块标签的背景和边框
3.一个元素设置浮动属性之后，该元素会朝着设置的方向移动，直到碰到父级或浏览器的边缘，或者前一个浮动元素，就会停止浮动。
4.浮动元素的层级比正常块元素的层级高
二、清浮动
clear：left/right/both/none/inherit;同级的前面的所有元素的某个方向上不能有浮动元素
clear：both；同级的前面的所有元素的左右两侧均不允许浮动元素。
方法：1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad!）
3.inline-block 清浮动方法
问题：margin左右自动失效；
4.空标签清浮动
问题：IE6最小高度19px；（解决后IE6还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法）
clear：after{content：”“；display：block；clear：both；}（主流浏览器都适合）
clear{zoom：1；}（适合IE6,IE7 zoom：缩放 a、触发IE下haslayout，使元素根据自身内容计算宽高b、FF不支持）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
#div1 {
font-size: 80px;
}
#div1:before {
/*content: "这是通过css添加的一段文字。";*/
content: "";
display: block;
width: 300px; height: 100px; background: pink;
}
#div1:after {
content: "这是after伪元素添加的内容";
display: inline-block;
background: orange;
}
/*
伪元素： :before :after (通常被称为伪类)
伪元素是通过css命令的方式，往页面中添加一个特殊的标记。这个标记默认是以行内标签的特征显示。这个标记可以支持绝大部分的css样式设置。
*/
</style>
</head>
<body>
<div id="div1">
这是在页面布局结构中的文字。
</div>
</body>
</html>
7.overflow：hidden 清浮动方法
问题：需要配合 宽度或者zoom兼容IE6 IE7；
overflow：scroll/auto/hidden;
overflow：hidden；溢出隐藏（裁刀！）
三、浮动兼容性问题
1.IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍）：
a、IE6
b、浮动
c、横向margin
d、块属性标签（加_display：inline;）
2.IE6下 li部分兼容性问题：
a、左右两列布局，右边右浮动IE6 IE7下折行；（左边元素浮动）
b、IE6 IE7 li 下元素都浮动在IE6 IE7下li下方会产生4px间隙问题；（加vertical-align:top;）
3.vertical-align/img问题：
a、vertical-align垂直对齐方式
1.加垂直对齐方式的同排元素都要加垂直对齐方式
2.垂直对齐方式可以解决元素下方间隙问题
b、图片下方间隙问题
1.display：block；（改变标签本身特性）
2.overflow：hidden；（必须知道图片高度）
3.vertical-align（暂时最完美的方案）
标签：
原文地址：http://www.cnblogs.com/llz1314/p/5721900.html
