清除浮动各解
一.添加空标记
最早最开始学CSS的时候我们用到的方法应该就是类似这样的:
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
CSS:
.a{float:left;}
.b{float:right;}
.clearfix{clear:both;}
.clearfix 如果有必要的时候可以写成这种方法:
.clearfix{clear:both;height:0;line-height:0;font-size:0;}
--------------------------------------------------------
优点:简单,方便,代码易理解.
缺点:多余的HTML代码和多余的元素.
二.overflow:hidden;
后来进阶到稍微高级一点的时候,我们开始讨厌多余的HTML代码了,于是我们开始追求更简洁,最好是只通过CSS就能实现的办法.overflow这个方法是只能通过父模块对子模块来使用.overflow:hidden;
HTML:
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.a{float:left;}
.b{float:right;}
--------------------------------------------------------
优点:容易控制,比较好理解,代码简洁.
缺点:当你父模块内的子模块使用到overflow的时候就不能使用了,因为会彼此冲突或者抵消.而且为了IE6的兼容父模块必须加上宽度.
三.:after伪元素
个人觉得这种方法是最高级的,当然每个人的看法不一样.但是这种方法对于不是专门做前端开发的人员或者刚开始接触CSS的人来说有点难以理解.:after是一个CSS提供的伪元素.意思就是字面意思,在该元素后的样式效果.
HTML:
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
*html .container{zoom:1;} /* for IE6 IE6不支持:after伪元素*/
*:first-child+html .container{zoom:1;}/* for IE7 IE7不支持:after伪元素*/
.a{float:left;}
.b{float:right;}
--------------------------------------------------------
优点:暂时没看出来,欢迎大家补充.
缺点:代码不易理解,CSS代码太多.
http://www.qianduan.net/new-clearfix.html
在网上搜集资料的时候看到前端观察里还有一个稍微简化一点点的办法:
.clearfix{*zoom:1;}
谢谢阅读,若有不正确的地方请提出来纠正.
