IE not clearing subsequent floats

问题

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>

回答1:

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.

回答2:

I'm fairly sure this is one of those rare bugs in ie6 that doesn't have a pure CSS solution.

Try using the ie7 javascript - it may fix the problem for you: http://code.google.com/p/ie7-js/

来源：https://stackoverflow.com/questions/795161/ie-not-clearing-subsequent-floats

标签

css

internet-explorer

css-float

clear