绝对定位的任意宽度 div 中的浮动错误

Question

IE 浏览器版本 6 和 7 再次出现问题

马上看一个例子，尝试调整窗口大小等等。

a preview (easier to open in IE this way)

code

HTML：

<div class="container">
    <div class="left-menu">
        <ul>
            <li>El1</li>
            <li>Element 2</li>
            <li>3</li>
        </ul>
    </div>
    <div style="margin-right: 60px;">Тест Тест</div>
</div>

CSS：

.container{
    position:absolute;
    top:100px;
    left:100px;

    outline: 1px solid red;
    background-color:pink;
}
.left-menu{
    outline: 1px solid green;
    background-color:#AAA;

    width: 50px;
    float: right;
}

现在我不明白 2 件事

1. 浮动元素会发生什么？盒子永远不会太小，实际上相邻 div 的边距大于 ul div 的宽度。但是当窗口足够小时，浮动元素似乎浮动到窗口边缘而不是其容器边缘，但是如果在窗口小时向右滚动一点，您会看到容器足够宽。

2. 不太重要的问题为什么会这么宽？它不应该和它的内容一样宽吗？

我想出的唯一解决方法是给我的绝对 div 一个宽度，但问题就来了。它应该根据内容调整大小，如果浮动 div 附近有图片。

并且会有一张图片 =) 这种宽度解决方法当然允许使用大量的 JavaScript，以比示例中显示的更复杂的结构调整每个元素的大小，但我想知道可以使用 css 代替吗？

Answer 1

Internet Explorer 在 div 和 float 方面存在问题，尤其是旧版本的 IE。每当我遇到浮动和 div 无法正确清除彼此的问题时，我都会依赖 Clearfix 方法。

将 clearfix css 添加到您的主 css 文件，然后将类 .clearfix 附加到 .container，使其看起来像 <div class="container clearfix">。

对于里面的 2 个 div，如果您希望这 2 个 div 的宽度根据其中的内容而改变，请去掉它们的边距和宽度。一个 div 向左浮动，另一个 div 向右浮动。

您会看到 Clearfix 强制父 div (.container) 将内部浮动元素一直包裹起来。

希望这会有所帮助！