在使用浮动的时候经常会遇到一个古怪的事情:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.clearfix {
border:1px solid green;
}
img {
float:right;
}
</style>
</head>
<body>
<div class="clearfix">
<p>不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!</p>
<img src="ilta.png" alt="#" />
</div>
</body>
</html>
见证奇迹的时刻到了!有一种比较丑陋的方法可以解决这个问题,它叫做清除浮动(clearfix hack).
让我们加入一些新的CSS样式:
.clearfix {
overflow: auto;
}
现在再看看发生了什么:
这个可以在现代浏览器上工作。如果你想要支持IE6,你就需要再加入如下样式:
.clearfix {
overflow: auto;
zoom: 1;
}
有些独特的浏览器需要“额外的关照”。清除浮动这潭 水很深很深,但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。