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

float css属性从页面的常规流中删除元素。这意味着它的位置不会受到其他元素（也不是浮动）的影响。因此，在您的示例中，这两个元素最终相互叠加。

如果您同时指定.box2财产float:left，它们将彼此相邻，我相信您的期望。

Answer 2

只是一个小小的变化：

.box2{
width: 300px;
height: 300px;
background: yellow;
float:left;
}

Working Fiddle

Answer 3

Will和Jatin给出的答案是正确的，但你也可以尝试在一个包装div中包装div，并在同一行显示两个div

示例：

 .container
 {
     display:inline-block;
 }

.box1{
    width:50px;
    height:200px;
    background: purple;
    float:left; 
 }

.box2{
    width: 50px;
    height:200px;
    background: yellow;
    float:right;
}

JSFiddle

Answer 4

你需要做两件事：

1）将两个方框包裹在div

中

2）添加浮动：左边两个框

通过这种方式，您无需清除后续容器的浮动

为什么不漂浮？

4 个答案: