html - CSS浮动属性问题（+指导）

Question

我需要一些帮助来弄清楚为什么我的布局很乱。这是我正在做的事情：站点。绿色盒子应该在紫色盒子里面。我认为有一个浮动的问题。由于我不完全理解float规则，有人可以帮助我找出问题并建议一些好的“旧”文档阅读吗？

谢谢！

score 3 · Accepted Answer

添加溢出：隐藏；到具有 id: content-n 的 div

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

score 0 · Accepted Answer

浮动从文档流中删除项目。

添加一个空的<div>or<span>并给它 CSS clear: both;。这将使 div 清除浮动元素，然后它的父级将展开到全高。

阅读clearfix和floats - 特别是标题为“Clearing Floats 的技术”部分。

来源

score 0 · Accepted Answer

你里面的物品#container都向左浮动。

这意味着它们将全部堆叠到左侧，直到它们达到包含元素的宽度，此时它们将开始换行（就像您的情况一样）。

包含浮动项目的包含元素不会扩展为包含浮动元素。您可以强制执行此操作的一种方法是执行以下操作：

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

这基本上在 div 的末尾添加了一个句号，将其设置为向左清除（因此它清除所有浮动项目），然后设置为不可见，迫使容器延伸到其内容之外。

score 0 · Accepted Answer

好，

这是我想推荐您阅读的关于 Float 的内容

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

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

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

4 回答 4