0

我有这个问题：绝对定位的父 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%，它会与垂直滚动条重叠。

我错过了什么？

4

3 回答 3

0

由于您使用的是overflow: hiddenclearfix，因此div.clear完全没有必要。但是，由于您还绝对定位了包装器，所以overflow: hiddenclearfix也是不必要的，clearfixposition: absolute也是如此（至少在 Chrome 和 FF 中）。

http://jsfiddle.net/j6jkk/

于 2012-03-26T21:03:00.210 回答
0

浮动元素会将其从文档流中移除。这意味着它不会影响其父级的尺寸，并且绝对定位的元素默认为 0 x 0。清除浮动元素的下一个兄弟元素只会扩展父容器的宽度，前提是您实际上在该元素中有内容，在其样式中设置了其宽度，或者仍在文档流中的其他兄弟元素之一的宽度大于父母的初始宽度。

请参阅来自 Mozilla 开发者网络的这篇文章，尽管这对于一般的 CSS 是正确的，而不仅仅是 Firefox：

浮动 - MDN

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

于 2012-03-26T21:14:37.527 回答
-1

尝试添加这个：

.wrapper{
    display: inline-block;
}
于 2012-03-26T20:58:21.110 回答