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/