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>