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

我提了一个问题
https://segmentfault.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的说法,不应当这样,请问,如何解释?

图片描述

阅读 3.4k
2 个回答

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

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

float:left;

但是如果你设置了

float:right;

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题