我提了一个问题
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的说法,不应当这样,请问,如何解释?
当你给所有的div设置浮动后,它们其实相当于在同一个流中。
规律是,当在同一行里放不下时,下一个元素会紧贴上一行最后一个元素,并尽可能的往最左移动。也就是,最先是向上浮动,然后再向左浮动。
这句话的前提是你设置的都是
但是如果你设置了
会怎么样呢?float还是在文档流中,所以前面的float会对后面的float产生影响。