闭合浮动的几种常用方法

问题描述

常见的需要清除浮动的情形是：

<div id="outer"> <div id="inner"></div> </div> 

当内层div是浮动的，外层div就不会被内层div的高度撑开。如下图：

 

解决方法

1. 添加清除浮动标签
2. 使用after伪类
3. 浮动外部元素
4. 设置overflow为hidden或者auto

添加清除浮动标签

<div id="outer" style="width:200px;height:100px;background:orange"> <div id="inner" style="width:100px;height:200px;background:#ddd;float:left"></div> <div style="clear:both" mce_style="clear:both"></div> </div> 

使用after伪类

#outer:after { content:"."; height:0; visibility:hidden; display:block; clear:both; } 

当然这种方法不使用与ie，所以要使用适当的hack，针对在ie6上的浮动清理：

#outer{display:inline-block} /* hack /*/ *html #outer{height:1%} outer{display:block} /* end hack */ 

浮动外部元素

这种方法很简单，就是吧outer也加上浮动。

设置overflow为hidden或者auto

把outer的overflow属性设置为hidden或者是auto。

几种方法的比较

• 不推荐使用after的方法，因为要使用hack，代码相对晦涩，对代码有洁癖的人可以使用。
• 使用overflow方法，可能会对页面表现带来影响，要经过细致的测试。
• 额外标签的方法是w3c推荐的方法，个人也经常使用，对页面影响小，而且简单，明了。
• float-in-float的方法和overflow一样，都是会对页面其他元素的表现产生未知影响，使用的环境相对狭窄。