【分享】浮动元素上 clear 特性的兼容性问题

这个问题
http://topic.csdn.net/u/20100823/17/b8751ffb-8e4d-46f1-a0af-2ab0798b2fc2.html

规则这样说
在 说说标准系列的clear那一帖中，最后说到了浮动元素上的 clear 特性会影响浮动的规则。
新增规则：
浮动框区的上外边界（top margin edge）必须低于前面所有左浮框的下外边界（在clear:left时），或者右浮框区（clear:right），或者两个框区(clear:both)。
详见：http://topic.csdn.net/u/20100820/17/9cd6010f-c903-43a7-83c7-4c74d7fc290e.html?03208088875356182
而在举例的时候，我们也看到了IE让人无奈的一面。新的规则，旧版本的IE不支持。

那么，到底在IE中，浮动元素上的 clear 是怎样被处理的呢？带着这个问题，让我们开始今天的内容。

含有clear特性的浮动元素对自身定位的影响
例：

HTML code

<div style="border:1px solid green; width:150px; float:left;">
  <div id="Float" style="float:right; width:100px; height:100px; background-color: blue;">Float</div>
  <div id="Clear" style="clear:right; float:left; width:100px; height:100px; background-color:red;filter:alpha(opacity=50);-moz-opacity:0.5; opacity: 0.5;">Clear</div>
</div>

上面代码中，为了更清楚的表现元素之间的关系，给 Clear 设置了 50% 的透明度。
你见过两个浮动元素重叠么？不可思议的是IE6/IE7/IE8(Q)中的截图：

两个浮动元素竟然重叠了，连紫色都合成了，very good。也就是说，在IE里浮动元素的clear特性可以忽略存在的浮动元素，神奇的IE。
其他浏览器根据标准显示，clear:right的浮动元素，应该低于它前面float:right的元素，见其他浏览器和IE8(S)中的截图：


含有clear特性的浮动元素对其后浮动元素定位的影响
例：

HTML code

<div id="Container" style="width:300px; height:200px; border:1px solid red;">
    <div id="DIV1" style="float:right; width:150px; height: 50px; background-color:blue;">1 float:right;</div>
    <div id="DIV2" style="clear:right; float:right; width:250px; height: 50px; background-color:red;">2 clear:right;
       float:right;
    </div>
    <div id="DIV3" style="float:left; width:100px; height: 50px; background-color:green;">3 float:left;</div>
</div>

按标准讲绿色的块的顶边，不能超过前面的红色块(它也是浮动元素)的顶边。
IE又标新立异了，看IE6/IE7/IE8(Q)中，绿色块把红色块直接忽略：

其他浏览器正常：


其他情况
喜欢穷举的童鞋可以自己慢慢去试，希望能听到不同的声音。

告诉我们什么
尽量不要将“clear”特性应用在浮动元素上，否则IE会给你好看。

更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录


------解决方案--------------------
哎，JS区高手多，人气也这么高，为何没人多写些关于JS方面的整套心得体会呢？就像楼主一样的整套的教学，JS位操作，或者OO方面的都可以，这些很多人都很需要的。虽然以前也有，但是没有像楼主写得这么完整化和系统化！楼主下次改写JS吧！期待你把OO或位操作，写几编好文章出来！非常期待。
------解决方案--------------------
跨浏览器开发，人气太低了，跟JS区比，没得比啊。
------解决方案--------------------
顶顶顶顶顶顶顶顶顶顶！！
------解决方案--------------------
学习学习~~~
------解决方案--------------------
新手学习
------解决方案--------------------
真好，楼主太棒了
------解决方案--------------------
ding...........................
------解决方案--------------------
学习一下......学习一下......