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来实现它。我想避免不必要的标记，但是哦，好吧......谢谢大家！

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; }

Answer 2

浮动包装器（将float：添加到.wrapper的css中），或者将<BR style="clear: both;">放在浮动图像之后。

将绝对div放在包装器之外，而不是在其中。

但你为什么绝对做位置？我打赌你不需要这样做，如果你提供了更多关于你想要做什么的信息，那么可能会有另一种选择。

Answer 3

绝对位置将绝对定位到身体，除非其父级具有静态以外的位置。如果您希望它绝对定位到父级.wrapper），则需要为.wrapper提供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/

Answer 4

通过在overflow: auto和.image周围添加.copy的附加包装解决。