は、どのように、このテキストは適切に周りのIE7に浮かぶ流れる取得するために

Question

を参照してくださいマークアップ+以下CSS、またはこのフィドル： http://jsfiddle.net/gq9w6/15/ ... IE7（またはIE8/9互換ビュー）

「Loremのイプサム」のテキストがすべきでdiv＃1と＃3の両方を囲んでいるが、IE7ではdiv＃1をクリアしている。

このシナリオでIE7を動作させるにはどうすればよいですか？

HTML：

<div id="div1">Feature image</div> 
<div id="div2"> 
    <div id="div4" class="a">fb like</div> 
    <div id="div5" class="a">g-plus1</div> 
    <div id="div5" class="a">tweet</div> 
</div> 
<div id="div3">related topics list</div> 
<div id="div7">bi-line</div> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

CSS：

#div1{border:1px dotted green;float:left;width:100px;height:100px;} 
#div2{height:15px;} 
#div3{float:right;clear:both;width:100px;height:30px;border:1px dotted green;} 
.a{float:left;width:70px;border:1px dotted red;} 
#div7{text-align:left;} 

UPDATE：それぞれのdivのpurpsoeを示し
HTML/CSSとフィドルに（/ 14）すべてのサンプルテキストで更新。

UPDATE
要件 明細書：

• A特色横一列で、画像の右にあるソーシャルメディア共有ボタンの左
• 直列に浮上画像行の上部がおすすめ画像の上部に位置合わせされています
• ソーシャルメディアボタンの下の行（彼らはフィドルで正しくラップされていませんが、決して気にせず、簡単に修正できます）
• 「関連トピック」ウィジェットが右に浮かび、おすすめ画像が消去されました（前者の上端が後端の一番下にくるようにします）
• 記事の本文は本文の下に始まり、同様に関連のトピックでは、あなたのコード#div1で

Answer 1

をウィジェットとして内容がフロートに押されているが、スペースを占有する#div2を残して、ドキュメントフローの取り出し左に浮上します。あなたの#div3が実際にすべてのフロートをクリアされ、右側に浮いている（それが#div1の下部と同じレベルにあります理由です。#div7が何をしているのかわからないが。それも浮くことになっていますか？

あなたが何をしようとしていますあなたは#div2と#div7にfloat: leftを追加し、#div3からclear: bothを削除した場合達成するために？

を、あなたはすべてのブラウザで同じ結果を得ることができます。