-1

我对溢出的浮点数有疑问（此处为 JSFiddle）。

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;or overflow:auto;）。

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

4

1 回答 1

2

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

然而，只有#son元素给出#father了它的高度。绝对定位的元素会从流中取出，因此如果#dog高度增加，其父容器 ( #father) 不会，因此#dog看起来会溢出。

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

你不能只使用浮动，并设置它的宽度吗？无论如何，您都在设置其父级和兄弟级的宽度，因此您知道它应该是什么宽度（如果您也指定了边框的宽度）。

演示：http: //jsfiddle.net/sgw4K/5/

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

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

于 2012-06-22T15:16:15.500 回答