我试图让两个 div 浮动到页面的两侧，文本在它们之间流动。第二个（左对齐）div 的顶部应与第一个（右对齐）div 的底部齐平。下面的代码在 FF、Chrome、Opera 等中运行良好，但在 IE 中无法正确清除。两个 div 都出现在文本的顶部。
如果我将左对齐 div 在文本中移得足够低，它在 IE 中工作得很好，但这并不是一个真正可持续的解决方案。
我在 IE CSS 浮动错误上发现了多个页面，但我还没有找到任何直接与此相关的内容。
CSS
div {
width: 200px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
position: relative;
}
.wrapper {
width: 600px;
border-color: #FF0000;
}
.right {
float: right;
border-color: #00FF00;
}
.left {
float: left;
clear: both;
border-color: #0000FF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus, dapibus ac,
consectetur quis, pellentesque eget, sem.
</div>
<div class="left">
Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan
turpis tristique consequat. Sed lacinia ligula at nibh.
Morbi in quam. Morbi commodo nibh.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus,
dapibus ac, consectetur quis, pellentesque eget, sem.
Maecenas est dui, imperdiet nec, fermentum ut,
pretium a, orci. Quisque hendrerit interdum orci.
Nulla sit amet risus non enim ultrices bibendum.
Aenean arcu purus, rhoncus at, vestibulum vel,
volutpat et, nunc. Integer eget risus eget purus viverra
congue.</p>
<p>Nullam vel libero ut purus semper ullamcorper.
Pellentesque mattis tincidunt odio. Nullam pulvinar
orci at dolor. Sed volutpat eros ac elit.
Praesent porttitor libero sed felis. Vivamus lobortis
pellentesque diam.
Proin laoreet massa ac metus. Integer faucibus lorem
molestie nibh. Integer id massa. Integer ligula ipsum,
pellentesque id, interdum at, pretium eget, orci.
Proin malesuada. Ut vel lorem.</p>
</div>
</body>
</html>
