Question

我正试图让两个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>

Answer 1

IE7和IE6的variety of problems元素包含float和clear。在IE7中，在clear的元素上使用float仅清除浮动在同一方向的其他浮动下面的浮动。

easyclearing修正版的修改版本可以解决这个问题，但不要抱有希望。有关详细信息，请参阅此页：New clearing method needed for IE7?。

最重要的是，你可能不会在没有作弊的情况下让它在IE6 / 7中工作：在文本中移动div，在段落中嵌入div等。

Answer 2

我很确定这是ie6中那些没有纯CSS解决方案的罕见错误之一。

尝试使用ie7 javascript - 它可能会为您解决问题：http://code.google.com/p/ie7-js/

IE不清除后续浮动

2 个答案: