限制div浮動清除到一個嵌套div內

Question

我有一個兩個div列（ColumnA和ColumnB）在MasterParent div內。這兩列使用float：left。好的沒問題。作品。

現在，在ColumnB內，我需要3個更多的單獨列（Column1,2,3）。

我將column1,2,3全部留下來，所以它們會一起堆疊起來，但是當我開始新行並清除之前的列浮動時，它會一直清除到MasterParent，並將下一行放到ColumnA底部的水平位置。

有沒有辦法只通過ColumnB清除，而不是一直到MasterPArent的div？

Answer 1

您無法清除任何內容，並將overflow: hidden添加到您的MasterParent div。看看這jsFiddle。

下面是代碼：

.Container 
{ 
    overflow: hidden; 
} 
.Col1 
{ 
    float: left; 
    width: 50%; 
} 
.Col2 
{ 
    float: left; 
    width: 50%; 
} 
.Col2a 
{ 
    float: left; 
    width: 33%; 
} 
.Col2b 
{ 
    float: left; 
    width: 33%; 
} 
.Col2c 
{ 
    float: left; 
    width: 33%; 
} 

<div class="Container"> 
    <div class="Col1"> 
     <p>Column 1</p> 
    </div> 
    <div class="Col2"> 
     <p>Column 2</p> 
     <div class="Col2a">2a</div> 
     <div class="Col2b">2b</div> 
     <div class="Col2c">2c</div> 
    </div> 
</div>