css清除浮动的方法
2016-02-06 本文已影响26人
恬雅过客
首先来看个栗子：
css代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main {width:300px;height:auto;padding:10px;background:#ccc;}
.main .left {width:100px;height:50px;background:red;float:left;}
.main .right {width:100px;height:50px;background:blue;float:left;}
.footer {width:300px;height:20px;background:green;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</body>
</html>
结果如果所示：
解决这种问题有几种方法：
- 在父级添加 overflow：hidden
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 - 父元素也设置浮动（加个float：left/right）
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 - 父元素设置 display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用 - 使用 :after 伪元素
优点：需要注意的是 :after 是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
缺点：兼容性不是很好。 - 在浮动的元素后面添加空标签 <div class="clear"></div> 清除浮动
优点：简单明了
缺点：无意义的空标签，不利于语义化
个人比较偏向于：after的方式（苹果网站就是采用此种方式）
