妙味课堂

网上流传的清除浮动有三种方式：
一：使用空标签清除浮动。
二：使用overflow属性。
三：使用after伪对象清楚浮动。

但是今天下午和王宁同学讨论CSS问题的时候，意外的发现了另一种清除浮动的可能：

父级是 绝对定位，或者是 固定定位。

测试代码：
<style>
#box { width: 300px; padding: 10px; border: 1px solid #ccc;  }
#left { width: 100px; height: 100px; border: 1px solid #ccc; float: left; }
#right { width: 180px; height: 200px; border: 1px solid #ccc; float: right; }
</style>

<div id=”box”>
<div id=”left”>左侧浮动层</div>
<div id=”right”>右侧浮动层</div>
</div>

效果：

给父级 #box 加上固定定位、或是绝对定位：
position: absolute; /* position: fixed; */

效果：

最终css：

<style>
#box { width: 300px; padding: 10px; border: 1px solid #ccc; position: absolute; /* position: fixed; */ }
#left { width: 100px; height: 100px; border: 1px solid #ccc; float: left; }
#right { width: 180px; height: 200px; border: 1px solid #ccc; float: right; }
</style>

注：在 ie6、ie7、ie8、Firefox/3.5.7、Safari/4.0.4、Opera/9.50 下测试通过。

在很多时候，用 js 来调用某个层出现，无论是弹出层，亦或是鼠标移入出现层，父级都有可能是绝对定位，相比较另外三种清除浮动的优劣，这种方式近乎于无缺陷。

此外，absolute 和 fixed 这二种定位形式也可以让 内嵌元素 转换成 块级 元素，

测试代码：

<span style=”border: 1px solid red; width: 100px; height: 200px; position: absolute;”>span</span>

或是：

<span style=”border: 1px solid red; width: 100px; height: 200px; position: fixed;”>span</span>

感谢王宁同学，如果没有和你一起讨论，还发现不了这个秘密(^_^)