html - 一个元素的正常流动

Question

是否可以仅为一个元素添加正常流量？这是我的麻烦：

html:

<div class="block pink float"></div>
<div class="block blue float clear"></div>
<div class="block green float"></div>

CSS：

.block {
   width: 200px;
   height: 200px;
}
.clear { clear: left; }
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf;}
.green { background: #b7d84b; height: 400px;}

http://jsfiddle.net/E2uLk/

我需要我的绿色块从粉红色的块开始浮动（位于文档的顶部和粉红色的右侧）。我无法更改 html 结构或添加任何额外的包装器。您可以在 Internet Explorer 7 中看到的预期结果 :) （由于一些错误，但我在所有现代浏览器中都需要相同）。非常感谢。

Answer 1

这是一个干净的方法：http: //jsfiddle.net/E2uLk/5/

你漂浮着粉红色和蓝色。
你用蓝色清除浮动。
你从粉红色和蓝色的宽度中抵消绿色。

.pink  { background: #ee3e64; float: left; }
.blue  { background: #44accf; float: left; clear: both; }
.green { background: #b7d84b; height: 400px; margin-left: 200px; }

Answer 2

因为您的块有 200px 的固定高度，所以您可以添加：

.green{ margin-top: -2OOpx;}

这会将您的绿色块向上移动粉红色块的高度（200px）。