CSS：浮动、绝对定位和溢出

Question

HTML

<div class="wrapper">
    <div class="image"></div>
    <div class="copy">blabla</div>
    <div class="outside"></div>
</div>

CSS

.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }

我希望.outside可以延伸到.wrapper之外，但是有两个问题：首先，.wrapper不会自动延伸以适应浮动的.image；其次，将.wrapper设置为overflow: auto可以解决高度问题，但会隐藏绝对定位的.outside。如何既能让高度自动拉伸，又不会切掉绝对定位的元素？ 编辑：我的包装器设置为相对位置，抱歉 - 忘记添加了。为进一步说明，这里有一些糟糕的图示： 编辑2：我通过在图像周围添加一个包装器并将其设置为overflow: auto来使它正常工作。我想避免不必要的标记，但没办法...谢谢大家！

- Alex

---

糟糕的图表在哪里？我只看到了3个很酷的图表 :) - Šime Vidas

好的，以上是三个很棒的图表。 :) - Alex

你也可以通过在 image 类后设置类似于 clearfix 的东西来完成它。 - ayyp

由于某些原因，那个没有起作用。 - Alex

Answer 1

您只需要清除浮动即可。

添加另一个空的div，如下：

<div class="wrapper">
    <div class="image"></div>
    <div class="copy">blabla</div>
    <div class="outside"></div>
    <div class="clearfix"></div>
</div>

CSS：

.clearfix { clear: both; }

- Paul

Answer 2

使用绝对定位将元素绝对定位到 body，除非其父元素具有非 static 的 position 属性。如果您想将其绝对定位到父元素（.wrapper），则需要为 .wrapper 添加一个 position 属性，例如 position:relative;

然后，添加一个 div 来清除浮动：

<div class="wrapper">
    <div class="image"></div>
    <div class="copy">blabla</div>
    <div class="clear"></div>
    <div class="outside"></div>
</div>

CSS：

.wrapper { 
    background-color:red;
    width: 200px; 
    margin: 0 auto; 
    position:relative;
}
.clear {
    clear:both;
}
.image { 
    float: left; 
}
.outside { 
    background-color:yellow;
    position: absolute; 
    top: 0; 
    left: -20px; 
    width:100px;
    height:20px;
}

演示：http://jsfiddle.net/AlienWebguy/6Fmy2/

- AlienWebguy

Answer 3

浮动包装器（在 .wrapper 的 css 中添加 float: left），或者在浮动图像后面放置
。

将绝对定位的 div 放在包装器外部，而不是内部。

但是为什么要使用绝对定位？我敢打赌你不需要这样做，如果你提供更多关于你想要做什么的信息，可能会有其他选择。

- Ariel

Answer 4

通过在.image和.copy周围添加一个带有overflow: auto的额外包装器来解决问题。

- Alex