兼容问题2

问题描述
---


在IE6 IE7 IE8(Q)中，如果 clear 特性被设置在一个浮动的元素上，该浮动元素会与其前边的浮动元素放置在同一行。

在IE6 IE7 IE8(Q)中，如果 clear 属性被设置到一个浮动的元素上，位于其后的浮动元素的外顶边高于该元素的外顶边。


---造成的影响
-
在IE6 IE7 IE8(Q)中，clear 特性被设置在一个浮动的元素上时，造成页面布局错乱。


--受影响的浏览器
-
IE6 IE7 IE8(Q)

问题分析

对于上述两个问题，我们通过以下的测试用例来说明。

分析以下代码：

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

谷歌等效果如下

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


解决方案
---
不要将 'clear' 特性应用在浮动元素上，以免出现上述不兼容的问题。