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>