Blog

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

关于清除浮动的问题,在上一节中,我们已验证了两种方法,可以得知,各有弊端,下面将对后两种方法详细说明,个人感觉这两种更为主流。 第三种:在浮动容器的同级添加一个含清除标签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效果失效或出问题”,这点我尚未验证过,不过应该不会是空穴来风吧。 总结:由此可见,用于清除浮动的方法是很多的(还有未在此列出的方法),针对各种情况也会各有弊端,关键就在于我们怎么去选择运用了。

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


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