首页 > 最后的浮动方式对后一个浮动的影响

最后的浮动方式对后一个浮动的影响

我提了一个问题
https://.com/q/1010000005013342/a-1020000005013577

michael_cai解答:
当你给所有的div设置浮动后,它们其实相当于在同一个流中。
规律是,当在同一行里放不下时,下一个元素会紧贴上一行最后一个元素,并尽可能的往最左移动。也就是,最先是向上浮动,然后再向左浮动。

我觉得不完全对。
下面看这个例子。
<html>
<style type="text/css">
body{

width:640px;
height:auto;
}   

div.box3{

width:250px;
height:280px;
background-color: green;
float:left;
}

div.box4{

width:250px;
height:200px;
float:left;
background-color: purple;
}

div.box5{

width:140px;
height:220px;
background-color: yellow;
float:right;
}

div.box6{

width:100px;
height:120px;
float:left;
background-color: red;
}

</style>
<body>

<div class="box">
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>

</div>
</body>
</html>

唯一不同的地方是div box5的浮动方式不同,导致box6显示成这样的状态:
它和box4紧靠一起,按照michael_cai的说法,不应当这样,请问,如何解释?


https://www.w3.org/TR/CSS22/visuren.html#float-position

自己看吧,一总有9点

Here are the precise rules that govern the behavior of floats:

在这个后面


当你给所有的div设置浮动后,它们其实相当于在同一个流中。
规律是,当在同一行里放不下时,下一个元素会紧贴上一行最后一个元素,并尽可能的往最左移动。也就是,最先是向上浮动,然后再向左浮动。

这句话的前提是你设置的都是

float:left;

但是如果你设置了

float:right;

会怎么样呢?float还是在文档流中,所以前面的float会对后面的float产生影响。

【热门文章】
【热门文章】