Question

我需要一些帮助来弄清楚为什么我的布局很混乱。以下是我的工作内容：The Site。绿色框应该在紫色框内。我认为有一个浮动问题。由于我不完全理解float规则，有人可以帮我识别问题并建议阅读一些好的“旧”文档吗？

谢谢！

Answer 1

将 overflow：hidden; 添加到id为：content-n

的div中

#content-n {
    clear: left;
    position: relative;
    width: 980px;
    overflow: hidden; /* add this */
}

Answer 2

Float从文档流中删除该项目。

添加空<div>或<span>并为其提供CSS clear: both;。这将使div清除浮动元素，然后它的父级将扩展到完整高度。

阅读clearfix和floats - 特别是章节标题“清除浮动的技巧”。

<强>来源（S）

Answer 3

#container内的所有项目都向左浮动。

这意味着它们都会向左叠加，直到它们达到包含元素的宽度，此时它们将开始换行（就像你的情况一样）。

保存浮动项的包含元素不会展开以包含浮动元素。强制执行此操作的一种方法是执行以下操作：

#container:after{
 content: ".";
 clear: left;
 visibility: hidden;
}

这基本上会在div的末尾添加一个句号，将其设置为清除左侧（因此它清除所有浮动项），然后设置为不可见，从而强制容器延伸超出其内容。

Answer 4

那么，

以下是我建议您阅读Float

的内容

除此之外，如果编辑#content定位从相对于绝对。这会将绿色框包装在紫色内部，因为它将占据与父母相关的位置（#content is is）..

#content {
   position: absolute;
   ..
   ..
   ..
}

浮动是非常好的功能，小心使用。