为什么不漂浮？

Question

为什么这两个框并不在以下代码中并排浮动？

 <style type="text/css">
    .box1{
        width: 300px;
        height: 300px;
        background: purple;
        float:left;
    }

    .box2{
        width: 300px;
        height: 300px;
        background: yellow;
    }
    </style>

    <div class="box1"></div>
    <div class="box2"></div>

jsFiddle描述问题.

Answer 1

该floatCSS属性去除页面的正常流动的元素.这意味着它的位置不会受到其他元素(也不是浮动)的影响.因此,在您的示例中,这两个元素最终相互叠加.

如果你也分配.box2了这个属性float:left,它们会彼此相邻,因为我相信你期待的.