Question

我有这个问题：在绝对定位的父div中有两个浮动div。

CSS：

.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; /* doesn't do anything! */
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

HTML：

<div class="wrapper">
    <div class="left">some text here</div>
    <div class="right">some text here too</div>
    <div class="clear"></div>
</div>

在Firefox中，如果包装器没有position:absolute，那么一切都按预期工作。只要我将其设为绝对值，包装器就会缩小，浮动divs中的内容会与文档的其余部分重叠。另外，如果我将包装器的宽度设置为100％，它会与垂直滚动条重叠。

我错过了什么？

Answer 1

由于您使用的是overflow: hidden clearfix，因此div.clear完全没必要。但是，因为你也定位你的包装器绝对overflow: hidden clearfix 也不必要，因为position: absolute也将clearfix （至少在Chrome和FF中）。

http://jsfiddle.net/j6jkk/

Answer 2

浮动元素会将其从文档流中取出。这意味着它不会对其父级的维度产生影响，并且绝对定位的元素默认为0 x 0。清除浮动元素的下一个兄弟只会扩展父容器的宽度，如果你实际上有该元素中的内容，其宽度设置为其样式，或者其他一个兄弟仍然在文档流中的宽度大于父母的初始宽度。

请参阅Mozilla开发者网络上的这篇文章，尽管CSS一般都是如此，而不仅仅是Firefox：

float - MDN

关于width: 100%问题，如果包装器的偏移父级是文档，这可能是Firefox响应定位样式的方式。您可以通过将绝对定位的元素放置在位置设置为div的空relative中来缓解这种情况。

Answer 3

尝试添加此内容：

.wrapper{
    display: inline-block;
}

在绝对div中浮动div不会扩展父级。 Clearfix似乎不起作用

3 个答案: