Blog

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

浮动,在网页里是再常用不过的布局方法了。当然大家都想尽量地避免招惹它,因为它总会使我们的页面乱掉。可是当不得不采用浮动的时候,那我们就该好好面对了,要想办法解决问题。
问题就在于如何有效地清除浮动,使页面正常显示(即浮动块下方内容不乱)。目前我所了解的方法已不下5种,不过我想择优讨论以下四种方法。
1. 为浮动元素的父级容器也设置为浮动的属性,根据是:浮动元素会闭合浮动元素;
2. 为浮动元素的父级容器添加overflow:auto属性;
3. 在浮动容器的同级添加一个含清除标签clear的容器,如:<div class=”clear”></div>,而clear样式写为:.clear {clear:both;};
4. 使用:after的伪类标签,如:为浮动元素的父级容器添加标签clearfix,而样式写为:.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}。
下面,我将分两节讨论,在这一节中,我先介绍前面两种。首先看预备源码:
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动的方法</title>
<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;}
--></style>
</head>
<body>
<div>
<div>左浮动块</div>
<div>右浮动块</div>
</div>
</body>
</html>
运行代码,得到的结果是:
显然浮动块溢出了父级容器,即没有清除浮动。
接下来,我们依次运用上面的四种方法来清除:
第一种方法,比较简单,直接为container添加浮动属性,即
.container {width:200px; height:auto; background:#FF0; padding:20px; float:left;}
运行代码,发现问题解决。但是需要提醒的一点是,如果在这个container容器外面还有其它页面内容时, 而container容器本身也已是浮动层,所以我们将再次面临清除浮动的问题,依此方法我们可为再外层容器添加浮动属性,。。。虽然到最后页面布局也能完成正常显示,但是,想想也觉得恐怖啊,整个页面里都是浮动层!!!所以一般不推荐用此方法。
第二种方法,为container添加overflow:auto属性,即
.container {width:200px; height:auto; background:#FF0; padding:20px; overflow:auto; zoom:1;} “zoom:1”用于兼容IE6。
这种是比较完美的方法,也相当流行,唯一的缺陷是在页面里相关块元素使用z-index属性进行重叠的时候,拥有overflow的容器始终不能被覆盖。

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


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