CSS Float оператор

Question

.float1  {
float: left;
width: 50%;
height: 50%;
}
.float2  {
float: right;
width: 50%;
height: 50%;
}
.float3  {
float: left;
width: 50%;
height: 50%;
}
.float4  {
float: right;
width: 50%;
height: 50%;
}
.clear {
clear: both;
}
<br />
HTML:
<br />
<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="clear"></div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>
<div class="clear"></div>

Я хочу вывод, подобный этому изображению:

Пожалуйста, исправьте мой код CSS. Спасибо.

Answer 1

Вам нужно очистить только третий элемент, поэтому нет необходимости в каких-либо четких элементах. Переместите все элементы влево, чтобы расположить их рядом друг с другом, вместо некоторых слева, а некоторые справа:

.float1, .float2, .float3, .float4 { float: left; width: 50%; height: 50%; }
.float3 { clear: both; }

HTML:

<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>

Answer 2

С небольшой модификацией @guffa, здесь приведен фрагмент кода для достижения желаемого результата.

Добавлены поплавки с горизонтальным центром и вертикальным выравниванием.

html,body {
    height:100%;
}
.float1, .float2, .float3, .float4 {  padding: 12.5% 0;   text-align: center; box-sizing:border-box; border: 1px solid red; float: left; width: 50%; height: 50%; line-height: 1;}
.float3 { clear: both; }

<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>

Answer 3

Если вы можете использовать CSS3, вы можете использовать селектор для выполнения этого без тонны кода:

CSS:

div.boxContainer>div{
    float: left;
    width: 50%;
    height: 50%;
}

div.boxContainer div:nth-of-type(3){
    clear:both;
}

HTML:

<div class="boxContainer">
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">1</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">2</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">3</div>
<div class="box" style="width:50px;height:50px;border:solid 1px black;float:left;">4</div>
</div>