有关清除浮动的讨论(二)


关于清除浮动的问题,在上一节中,我们已验证了两种方法,可以得知,各有弊端,下面将对后两种方法详细说明,个人感觉这两种更为主流。
第三种:在浮动容器的同级添加一个含清除标签clear的容器。这是我用了很久的方法。利用一对空标签并为其定义clear样式,我一般就用<div></div>,如下添加:
<style><!--
.container {width:200px; height:auto; background:#FF0; padding:20px;}
.left, .right {background:#FFF; border:1px solid #F00; height:100px; width:90px; font-family:"微软雅黑"; line-height:90px; text-align:center;}
.left {float:left;}
.right {float:right;}
.clear {clear:both; height:0px; line-height:0px; font-size:0px; visibility:hidden;}
--></style>
<div>
<div class="left">左浮动块</div>
<div>右浮动块</div>
<div class="clear"></div>
</div>
在这里,我的clear样式除了定义clear:both外,还定义了后面几个属性,是为了兼容各个浏览器,尤其是IE6。大家都知道的,div有默认的高度,这个就不多说了。这些也是在实践中慢慢摸索出来的,也吸取了不少前辈的经验。这对div标签是要添加在所有浮动块的最后面,且要与它们在同级父级容器下。
尽管这种方法也曾用得很顺手,但如各前辈所言,它的弊端是增加了无意义的结构元素。
第四种方法使用after伪对象清除浮动。这个也是比较主流的,写法如下:
<style type="text/css"><!--
.container {width:200px; height:auto; background:#FF0; padding:20px;}
.left, .right {background:#FFF; border:1px solid #F00; height:100px; width:90px; font-family:"微软雅黑"; line-height:90px; text-align:center;}
.left {float:left;}
.right {float:right;}
.clearfix:after {content:"."; clear:both; display:block; height:0; visibility:hidden; }
.clearfix {zoom:1;}
--></style>
<divmso-bidi-font-weight:normal">clearfix">
<div class="left">左浮动块</div>
<div class="right">右浮动块</div>
</div>
在这里为伪对象设置height:0是必须的,否则该元素(即container容器)会比实际高出若干像素。另外,.clearfix {zoom:1;}是写给IE看的,原理就是触发haslayout。曾在网上看到某前辈说“zoom:1会使一些js效果失效或出问题”,这点我尚未验证过,不过应该不会是空穴来风吧。
总结:由此可见,用于清除浮动的方法是很多的(还有未在此列出的方法),针对各种情况也会各有弊端,关键就在于我们怎么去选择运用了。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP