IE不清除后续浮动 [英] IE not clearing subsequent floats
问题描述
我想让两个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： b
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // EN
http：//www.w3。 org / TR / html4 / strict.dtd>
< html>
< head>
< link rel =stylesheethref =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。
Morbi in quam。 Morbi商品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。整数eget risus eget purus viverra
congue。< / p>
< p> Nullam vel libero ut purus semper ullamcorper。
Pellentesque mattis tincidunt odio。 Nullam pulvinar
orci在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。整数id massa。 Integer ligula ipsum，
pellentesque id，interdum at，pretium eget，orci。
Proin malesuada。 Ut vel lorem。< / p>
< / div>
< / body>
< / html>
IE7和IE6有各种问题与具有 float 和清除。在IE7中，在 float 的元素上使用 clear 只会清除浮动在其他浮动下方的浮动
easyclearing 修复可能会做的伎俩，但不要让你的希望。有关详情，请参阅此页： IE7需要新的清算方法。
底线是，你可能不会得到这个工作在IE6 / 7没有作弊：在文本中移动div，嵌入div在段落等。 / p>
I'm trying to get two divs to float to opposite sides of the page, with text flowing between them. The top of the second (left-aligned) div should be even with the bottom of the first (right-aligned) div. The code below works fine in FF, Chrome, Opera, etc. fine, but they do not clear properly in IE. Both divs appear at the top of the text.
If I move the left-aligned div low enough within the text, it works fine in IE, but that's not really a sustainable solution.
I've found multiple pages on IE CSS float bugs, but I haven't found anything speaking directly to this.
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>
IE7 and IE6 have a variety of problems with elements that have both float and clear on them. In IE7, using clear on an element with float only clears the float below other floats floated in the same direction.
A modified version of the easyclearing fix may do the trick, but don't get your hopes up. See this page for details: New clearing method needed for IE7?.
Bottom line is that you're probably not going to get this to work in IE6/7 without cheating: moving the div down in the text, embedding the divs in paragraphs, etc.
这篇关于IE不清除后续浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
