Question

div class="clear" 但是占用高度,怎么办？

在前面有两个float:left的div，然后接着一个<div class="clear"></div>，CSS中的写：.clear {clear:both; }接着还有一个div。在IE8中正常，但IE6,IE7中这个clear的div始终占用一个高度把下面那个div顶到下面了。
在网上搜，有人说加上height:0px; font-size:0px; line-height:0px; 还有人用 height:1px; margin-top:-1px;各种各样的都试过了，但是都没用，还是有高度。
但是很诡异的是这个高度在IE8的开发人员工具里看不到（理论上讲一个div如果有高度，在开发人员工具里可以看到蓝色的框，但是这个没有蓝色的框）。
请教有丰富经验的大侠告诉我这个问题的完美的解决方法，注意是IE6,IE7哦~~

Answer 1

首先纠正一下，那不是占用高度，clear:both的意思，你从字面上来看就应该清楚，说白了，就是清除左右两边的元素。所以，它下面的代码才会在它下面。

不理解为什么你喜欢钻牛角尖，如果你想实现和IE8一样的效果，不让它在下面，你把<div class="clear"></div>删除不就完事了，或者删除 class="clear"或者删除css代码。

还是我没理解你说的意思，你的意思是说上下两个DIV之间有缝隙？

在clear:both;后面加float:left;或者在它下面的那个DIV加上float:left;

我不清楚你理解为什么会出现IE6,7,8吗

当浏览器诞生的时候，还没有W3C组织，微软秉持一贯作风，即使后来出现WEB标准后它仍然使用自己“独特”的方式开发，没有遵循业界标准。大家都知道Firefox占的份额越来越大，它的诸多优点让IE不得不从良。不管发展到IE几，你设计的方向绝对应该向Firefox靠齐，它才是标准。

Answer 2

如果有高度或者是错位的情况下，你可以把clear移除看看是不是这个地方的问题。
1、看看结尾是否正常。
2、设置有问题。（因为一般的clear是不会这样的即使是IE8）

Answer 3

我也遇到此问题,把最终代码给你
.clear
{
height:0;
font-size:0;
clear:both;
over-flow:hidden;
}
这样就可以了