css清除浮动主要方法

标签：clear   style   浏览器   hidden   span   oat   使用   问题   页面   

1、浮动元素尾部添加空div标签，设置css为clear：both；

缺点：如果页面浮动布局多，则需要添加较多div；

2、父级元素定义伪类：after和zoom：1；

.father:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.father{zoom:1}

推荐使用，定义公共类，减少css代码；

3、父级元素使用overflow：hidden；

原理：父级元素还必须设置boom：1或者width，且不能定义高度，因为使用overflow：hidden时，浏览器会自动检测浮动区域的高度；

缺点：不能配合position使用；

4、父级元素添加display：table；

缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用；

而外不推荐使用的方法有：父级元素定义float；使用overflow：auto；

css清除浮动主要方法

标签：clear   style   浏览器   hidden   span   oat   使用   问题   页面   

原文地址：http://www.cnblogs.com/Yoriluo/p/6848409.html