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>