CSS花車引起佈局問題

Question

當我使用下面的代碼中，最後一個div重疊浮動內容：

<div style="width:50%;float:left;">test</div> 
<div style="width:50%;float:left;">test</div> 
<div style="background:red;">test</div> 

常見的解決方法是這樣：

<div style="overflow:hidden;"> 
<div style="width:50%;float:left;">test</div> 
<div style="width:50%;float:left;">test</div> 
</div> 
<div style="background:red;">test</div> 

然而，在我情況下，我不能添加額外的元素。有沒有另外的解決方法呢？

編輯： 明確：均;固定重疊的問題，但有一個在最後一個div保證金，所以它是這樣的：

<div style="width:50%;float:left;">test</div> 
<div style="width:50%;float:left;">test</div> 
<div style="background:red;clear:both;margin-top:50px;">test</div> 

而現在的新問題是，保證金沒有顯示出來。

Answer 1

你可以簡單地清除漂浮...

<div style="background:red;clear: both;">test</div> 

Answer 2

設置clear財產上的最後<div>到left或both：

<div style="background: red; clear: left;">test</div> 

編輯：至於保證金，你可以做一些相對定位：

<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div> 

Answer 3

請嘗試以下操作：

<div style="width:50%;float:left;">test</div> 
<div style="width:50%;float:left;">test</div> 
<div style="background:red;clear:left;">test</div> 

編輯。要獲得margin-top，請將浮動底部添加到浮動元素

<div style="width:50%;float:left;margin-bottom:50px;">test</div> 
<div style="width:50%;float:left;margin-bottom:50px;">test</div> 
<div style="background:red;clear:both;">test</div> 

Answer 4

這裏沒有必要使用浮動。製作前兩個元素inline-block元素，第三個元素爲block級元素。

HTML：

<div class="inline-block"> 
    Test 
</div><div class="inline-block"> 
    Test 
</div> 

<div class="block">Test</div> 

注意</div><div class="inline-block">是感人。由於這兩個元素是內嵌塊元素，因此標記中的任何空格都會在演示文稿中產生空間。

CSS：

.inline-block { 
    width: 50%; 
    display: inline-block; } 
.block { margin: 50px 0 0; } 

前瞻：浮動左http://jsfiddle.net/Wexcode/eGPWt/