CSS déclaration 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> 

Je veux une sortie comme cette image:

S'il vous plaît corriger mon code css. Merci.

Answer 1

Vous n'avez besoin que d'effacer le troisième élément, il n'y a donc pas besoin d'éléments clairs. Float tous les éléments vers la gauche pour les mettre à côté les uns des autres au lieu de quelques-uns à gauche et à droite quelques-uns:

.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

Si vous êtes en mesure d'utiliser CSS3, vous peut utiliser un sélecteur pour y arriver sans des tonnes de code:

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>