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

 
HTML: 

 
<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

Если вы можете использовать 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>