IE6/7下float: right 换行的BUG修改

这几天接手了一个PC端的需求，遇到了一个问题，就是float:right在IE6/7下会换行展示的BUG。调整IE的兼容性着实让人头疼，各种奇奇怪怪的问题层出不穷。话不多说，下面介绍下解决办法。

首先，我们来举个栗子：

<div id="box">
    <span class="left">左边的文本内容</span>
    <p class="right">右边的文本内容</p>
</div>

这个是基本的文档结构，接下来是css样式：

* {
    margin: 0;
    padding: 0;
}

#box {
    width: 300px;
    padding: 10px;
    font-size: 12px;
    overflow: auto;
    border: 1px solid blue;
}

p.right {
    float: right;
}

这样一来，在Chrome, Firefox,IE8+等浏览器中显示均正常，显示效果如下：

但是在IE6/7中显示的效果确实右边的内容下沉一行，变成了折行显示，这显然是不符合要求的。在折腾css许久无果之后，发现了一个极为简便的修改方式，就是调整文档顺序，即将HTML代码进行调整，无需操作CSS代码，具体修改如下：

<div id="box">
    <p class="right">右边的文本内容</p>
    <span class="left">左边的文本内容</span>
</div>

将需要向右浮动的元素位置调整至无需浮动元素之前即可，这样便可完美解决IE6/7下元素向右浮动折行的问题~~~