：元素内部末尾添加内容

特性：


　　1. 块在一行显示


　　2. 行内属性标签支持宽高


　　3. 没有宽高的时候内容撑开宽度


　　问题：


　　1. 代码换行被解析


　　2. ie6、ie7不支持快属性标签的inline-block;


　　前端规范：


　　1. 所有书写均在英文半角状态下的小写


　　2. id,class必须以字母开头


　　3. 所有标签必须闭合


　　4. html标签用tab键缩进


　　5.


　　6. /* css注释 */


　　7. ul,li/ol,li/dl,dt,dd拥有父子关系的标签


　　8. p,dt,h标签里面不能嵌套快属性标签


　　9. a标签不能嵌套a


　　10. 内联元素不能嵌套块


　　float浮动：


　　1. 块元素


　　2. 内容撑开宽高


　　3. 脱离文档流 (文档流是文档中可以显示对象在排列时所占用的位置)


　　4. 提升层级半层


　　清除浮动的方法及问题


　　1. 加高度 (扩展性不好)


　　2. 给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效(floatsbad!))


　　3. 加inline-block (margin左右自动失效)


　　4. 空标签清除浮动 (ie6最小高度19px;(解决ie6下还有2px偏差))


　　5. br清除浮动 (不符合工作中的结构、样式、行为三者分离的要求)


　　6. after伪类清除浮动 (现在主流)


　　.clear:after{content:’’;display:block;clear:both;}


　　.cler{zoom:1}


　　after伪类：元素内部末尾添加内容


　　:after{content:”添加的内容”;}ie6,ie7下不兼容


　　zoom缩放


　　a. 触发ie下haslayout，使元素根据自身内容计算快高


　　b. ff不支持


　　7.ovrflow:hidden清除浮动方法 (需要配合宽高或者zoom兼容ie6 ie7)


　　overflow:scroll || auto || hidden;


　　overflow:hidden;溢出隐藏(裁刀)