浮动,在网页里是再常用不过的布局方法了。当然大家都想尽量地避免招惹它,因为它总会使我们的页面乱掉。可是当不得不采用浮动的时候,那我们就该好好面对了,要想办法解决问题。
问题就在于如何有效地清除浮动,使页面正常显示(即浮动块下方内容不乱)。目前我所了解的方法已不下5种,不过我想择优讨论以下四种方法。
1. 为浮动元素的父级容器也设置为浮动的属性,根据是:浮动元素会闭合浮动元素;
2. 为浮动元素的父级容器添加overflow:auto属性;

3. 在浮动容器的同级添加一个含清除标签clear的容器,如:

,而clear样式写为:.clear {clear:both;};

4. 使用:after的伪类标签,如:为浮动元素的父级容器添加标签clearfix,而样式写为:.clearfix:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}。
下面,我将分两节讨论,在这一节中,我先介绍前面两种。首先看预备源码:
示例代码:
左浮动块
右浮动块
运行代码,得到的结果是:
显然浮动块溢出了父级容器,即没有清除浮动。
接下来,我们依次运用上面的四种方法来清除:
第一种方法,比较简单,直接为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的容器始终不能被覆盖。