Question

css的两个部分，其中有3个框，css和css2之间只有一个区别在css1中，box2为float:left;，在css2中为box2为float:right;。
css1和css2的任何其他css代码都是相同的。
这是我的css1。

＆＃13;

body{
    margin:0px;
    }
div.box{
    width:640px;
    height:800px;
    }
div.box1{
    width:500px;
    height:100px;
    background-color: red;
    float:left;
    }
div.box2{
    width:140px;
    height:140px;
    background-color: blue;
    float:left;
    } 
div.box3{
    width:250px;
    height:300px;
    background-color: green;
    float:left;
    }

＆＃13;

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

＆＃13;

这是我的css2。

＆＃13;

body{
    margin:0px;
    }
div.box{
    width:640px;
    height:800px;
    }
div.box1{
    width:500px;
    height:100px;
    background-color:red;
    float:left;
    }
div.box2{
    width:140px;
    height:140px;
    background-color: blue;
    float:right;
    } 
div.box3{
    width:250px;
    height:300px;
    background-color: green;
    float:left;
    }

＆＃13;

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

＆＃13;

＆＃13;
css1和css2中只有一行css不同。
在css1中，为什么css1中box2的float:left会导致box1和bo3之间出现间隙？在css2中，为什么css1中box2的float:right导致box1和bo3之间没有间隙？
请指出css规则
https://www.w3.org/TR/CSS22/visuren.html#float-rules
对于css1和css2的结果。

Answer 1

第一个CSS中box2的高度与box2完全相同，因为box3和float都是left ed box1。因此，请考虑它们处于相同的z轴（仅作为示例）。

现在在第二种情况下，box3和float仅left编辑box2。所以他们在同一个平面上，而float: left，漂浮在右边，在另一个平面上。

我怀疑，clear: left也会planes。

注意：这可能不是确切的情况，但我使用z-axis和orderitem 只是为了更简单地理解。< / p>

前一个浮动框如何影响下一个浮动框？

1 个答案: