CSS поплавки вызывают расположение вопросы

Question

Когда я использую следующий код, последний ДИВ перекрывает плавал содержание:

<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> 

Однако, в моем Я не могу добавить дополнительный элемент. Есть ли еще один способ обхода?

Редактировать: очистить: both; исправлена ​​перекрывающийся вопрос, но есть запас на последней 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> 

Edit: Что касается края, вы можете сделать некоторое относительное позиционирование:

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> 

EDIT. Чтобы получить 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; } 

Preview: http://jsfiddle.net/Wexcode/eGPWt/