html - 1 つの要素の通常の流れ

Question

1つの要素だけに通常のフローを追加することはできますか? これが私の悩みです：

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) だけ上に移動します。