css force float div

Question

我的代碼中的所有div都浮動到右邊，但似乎id =「m_in_box4」不會浮動到我想要的位置。如何將id =「m_in_box4」浮動到第一個框下方的空白處？

<!--start of main box--> 

<div id="main""> 

<div class="m_big_box" id="m_in_box1"></div> 
<div class="m_small_box" id="m_in_box2"></div> 
<div class="m_big_box" id="m_in_box3"></div> 
<div class="m_small_box" id="m_in_box4"></div> 
<div class="m_small_box" id="m_in_box5"></div> 
<div class="m_small_box" id="m_in_box6"></div> 


<div> 


<style> 

#main { 
width: 700px; 
overflow: hidden; 
} 

#m_in_box4 { 
border: 1px solid orange; 
clear: left; 
} 

.m_big_box, m_small_box { 
float: left; 
border:1px solid blue; 
height: 300px; 
min-width: 333px; 
max-width: 100%; 
} 

.m_small_box { 
float: left; 
border: 1px solid red; 
height: 150px; 
min-width: 333px; 
max-width: 100%; 
} 

</style> 

Answer 1

我修復它，以防萬一有人在乎我是如何做到的。

<div id="main"> 
<div id="m_large_box"> 
<div class="m_big_box" id="m_in_box1"></div> 
<div class="m_small_box" id="m_in_box2"></div> 
<div class="m_small_box" id="m_in_box3"></div> 
</div> 

<div id="m_large_box"> 
<div class="m_small_box" id="m_in_box4"></div> 
<div class="m_big_box" id="m_in_box5"></div> 
<div class="m_small_box" id="m_in_box6"></div> 
</div> 

</div> 

<style> 

#main { 
width: 700px; 
overflow: hidden; 
} 

#m_large_box{ 
border: 1px solid; 
float: left; 
margin: 0; 
min-width: 333px; 
max-width: 100%; 
} 

.m_big_box{ 
border:1px solid blue; 
height: 300px; 
} 

.m_small_box { 
border: 1px solid red; 
height: 150px; 
} 

</style>