Question

我遇到浮动溢出（JSFiddle here）的问题。

HTML

<div id="father">
    <div id="son">
        gruik
    </div>
    <div id="dog">
        gruikgruik gruik gruik gruikg ruik gruik gruikgr uikgruik gruik gruik gruik
    </div>
</div>

CSS

div { border: solid; }
#father { width: 300px; position: relative; }
#father:after { content: ""; display: block; clear: both; }
#son { width: 100px; float: left; border: solid red; }
#dog { float: left; border: solid blue; position: absolute; left: 105px; }

如您所见，#dog溢出#father。我尝试过经典的CSS技术，但它们只是不起作用（clearfix方法，overflow:hidden;或overflow:auto;都没有。）

我认为问题出现是因为使用了位置CSS属性，但我需要它。

Answer 1

position: absolute;正确定位#dog元素相对于#father（因为#father有position: relative;）。

然而，只有#son元素赋予#father高度。绝对定位的元素将从流中取出，因此如果#dog的高度增加，则其父容器（#father）将不会，因此#dog看起来溢出。

为什么必须在position: absolute;上使用#dog？

你能不能只使用float，并设置它的宽度？你正在设置它的父和兄弟宽度，所以你知道它应该是多少宽度（如果你也指定了边框的宽度）

DEMO： http://jsfiddle.net/sgw4K/5/

编辑/更新：在发现其他样式后， thirtydot 建议对问题进行两次声音修复。请参阅下面的评论或以下内容：

要解决此问题，您可以从float: left删除#son，然后选择其中一个这两个选项：margin-left: 52px元素上的overflow: hidden;或#son。

浮动溢出和位置冲突

HTML

CSS

1 个答案: