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>