How to deal with IE7 not determining the width of floated items correctly?

问题

Frequently in my projects, I use floated elements. This all plays pretty nicely until IE7 gets involved and starts mucking things up. Take this code, for example:

HTML

<div id="container">
    <div id="element-1" class="left">
        Some content
    </div>
    <div id="element-2" class="right">
        Some much longer, more complicated content
    </div>
    <div class="clear"></div>
</div>

CSS

.left {
    display:block;
    float:left;
}
.right {
    display:block;
    float:right;
}
.clear {
    clear:both;
    visibility:hidden;
}

In a lot of cases, IE7 will drop #element-2 down to a new line. I've found that this is the result of IE7 not determining any width for the floated elements based on their content, and assuming that one (or both) of them has a width equal to that of the container div. The quickest solution I usually find to this is to set a width on that element for IE7.

This problem is a bit sporadic as it doesn't happen every time I use floated elements, but it does happen fairly frequently. It seems to be a lot more common when I use concatenated floats like:

HTML

<div id="container">
    <div id="element-1" class="left">
        Some content
    </div>
    <div id="element-2" class="right">
        <div class="left">
            Some much longer, more complicated content
        </div>
        <div class="right">
            Even more content
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>

CSS

Same as above.

Is there a better way to get IE to recognize the widths of the floated elements?

回答1:

IE6 and 7 require fixed widths for floating elements, I've always used it that way to prevent issues from occurring...

回答2:

It's generally just good practice to use defined widths on floated elements.

来源：https://stackoverflow.com/questions/9233683/how-to-deal-with-ie7-not-determining-the-width-of-floated-items-correctly