用float属性不可避免在非ie浏览器下回出现浮动问题，具体症状表现为：心跳发热，脸部通红，便秘 ，子层不继承父层的高度，照成高度不统一现象（现在的小屁孩真调皮）。copy个现成例子看现象：
CSS代码：
div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
background-color: #6374AB;
color: #ffffff;
}
div.right {
width: 45%;
float: right;
background-color: #6374AB;
color: #ffffff;
}
html代码：
<div class="container">
<div class="left">
<p>The left column.</p>
<p>The left column.</p>
<p>The left column.</p>
<p>The left column.</p>
</div>
<div class="right">
<p>The right column.</p>
<p>The right column.</p>
<p>The right column.</p>
</div>
</div>
看到了吧，两个任性的小屁孩。父层背景为黑色，子层背景为蓝色，在ie下父层的黑色背景应该囊括子层，而在非ie下却会出现一个黑线，简单的讲就是高度为0，应该来说这是浏览器的一个bug。解决的方法很多，除了加强对孩子的开导和教育之外，比较常用有clear:both;overflow:hide;等。之前我一直都在父层上加个overflow：hide；属性，看起来挺好用也挺简单，不听经高人说：
overflow: hidden用来布局容易出问题，一是用 JavaScript Popup 出来的层很可能显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。
为了避免篇幅过长，直接说重点。目前来说最好的使用伪对象来解决。方法为在父层加上这些属性：
.clearfix:after {
content: "�020";/*放一个空白字符,借鉴自Adobe首页*/
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;/*这个主要针对ie系列浏览器*/
}
把这些属性在加到上面例子的css中,然后再父层调用。看效果
看到了吧小屁孩听话了。
[...] 。CSS hack 其实还有很多，比如之前的清除浮动也用到了伪类。不过在书写代码的时候还是要尽量少用CSS [...]