右浮动对布局的影响

之前写代码的时候，发现有个小问题，以前一直没有注意。

直接看demo。

<style type="text/css">
        #demo{
            width: 400px;
            height: 200px;
            background: green;
        }
        #demo > .left{
            width: 250px;
            height: 200px;
            background:#333;
        }
        #demo > .right{
            width: 150px;
            height: 200px;
            background:red;
            float:right;
        }
    </style>

    <div id="demo">
            <div class="left">

            </div>
            <div class="right">

            </div>
    </div>

右边那个红色的div被挤到下面来了。

然后我们把两个div换一下顺序，变成

    <div class="left">

            </div>
            <div class="right">

            </div>

效果就变成这样了。

是不是很神奇。

这其实是因为，当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥，另起一行。

解决的办法有两种，第一种就是像我刚才那样，把浮动的元素放前面。第二种就是把前面一个元素也设置成浮动。

比如我们经常会写这样的效果。（右边长度固定，左边自适应。那就可以用这个方法）

<style type="text/css">
        #demo > .left{
            width:100%;
            height: 200px;
            margin-right: 150px;
            background:#333;
        }
        #demo > .right{
            width: 150px;
            height: 200px;
            background:red;
            float:right;
        }
    </style>

    <div id="demo">
        <div class="right">

        </div>
        <div class="left">

        </div>
    </div>