css - CSS 浮动和清除

Question

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

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

我float: left用于所有 div 和clear: right[2] div，但结果是：

[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

怎么了：

你不能这样用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

Answer 4

用于<div style="clear:both"></div>强制断行

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