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


关于清除浮动的问题,在上一节中,我们已验证了两种方法,可以得知,各有弊端,下面将对后两种方法详细说明,个人感觉这两种更为主流。
第三种:在浮动容器的同级添加一个含清除标签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

Our Client Satisfaction

Rating for previous quarterr

4.00

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

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