如何让这个文本在IE7中的浮动周围正常流动

Question

请参阅下面的标记+ css，或者这个小提琴： http://jsfiddle.net/gq9w6/15/ ...在IE7（或IE8 / 9兼容性视图）中

“Lorem ipsum”文本应该包含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;}

更新
HTML / CSS和小提琴（/ 14）都更新了示例文本，显示每个div的purpsoe。

更新
书面描述的要求：

• 特色图片浮动到左侧
• 图片右侧的一系列社交媒体分享按钮，水平行，行顶部与特色图片顶部对齐
• 社交媒体按钮下面的一个副行（他们没有正确地包裹在小提琴中，但没关系，这很容易修复）
• “相关主题”小部件向右浮动，清除特色图片（前者的上边缘与后者的下边缘对齐）
• 文章文字从边线开始，包围特色图片的其余部分以及相关主题小部件

Answer 1

在你的代码中，#div1浮动到左侧，从文档流中取出，留下#div2占用空间，尽管内容是由浮动推送的。你的#div3实际上正在清除所有花车并向右浮动（这就是它与#div1底部处于同一水平的原因。不确定#div7正在做什么。它是否也是应该漂浮？

你想要达到什么目标？

如果您将float: left添加到#div2和#div7并从clear: both删除#div3，您将在所有浏览器中获得相同的结果。