CSS浮动和清除

Question

我有3个div，我试图以同样的方式定位它们：

[1][1][2][2]
[1][1][3]

我对所有div使用float: left，为[2] div使用clear: right，但结果是：

[1][1][2][2][3]
[1][1]

我做错了什么？

http://jsfiddle.net/3y3k0/v2jaC/1/

Answer 1

我在这里有一个工作示例http://jsfiddle.net/uKDNm/

关键是将divs 2 和 3 分组到另一个<div>元素中，该元素还必须具有float:left样式已应用，divs 2 和 3 跨越div 1 的垂直方向：

<div id="one">One</div>
<div id="col2">
   <div id="two">Two</div>
   <div id="three">Three<div>
</div>

Answer 2

请在此处找到答案http://jsfiddle.net/9mx7K/19/

<div style="float:left;">[1]</div>
<div style="float:left;">[1]</div>
<div style="float:left;">[2]</div>
<div style="float:left;">[2]</div>
<div style="float:left;clear:both;">[1]</div>
<div style="float:left;">[1]</div>
<div style="float:left;">[3]</div>

Answer 3

使用<div style="clear:both"></div>强行破解行

>> [1][1][2][2][clear:both][1][1][3]

Answer 4

出了什么问题：

你不能那样使用clear。

您需要clear float的方向。

如果它向左浮动则需要清除左侧，反之亦然。

解决方案

使用.clear课程。

<强>（HTML）：

<div class="float">1</div>
<div class="float">1</div>
<div class="float">2</div>
<div class="float">2</div>
<div class="float clear">1</div>
<div class="float">1</div>
<div class="float">3</div>

<强>（CSS）：

.float { float: left; } /* Or float: right; */

.clear { clear: left; } /* Or clear: right; */

演示

这是 live example