绝对定位的div元素高度被忽略了。

Question

我有这个简单的HTML结构：

<div id="mainbody">
  <div id="main">
  ...
  </div>
  <div id="left">
  ...
  </div>
</div>
<div id="footer">
...
</div>

"mainbody"这个 div 具有 position:relative 属性。 "left" 这个 div 具有 absolute 定位，位于页面左侧，高度是动态的。 "main" 这个 div 在 "left" div 的右侧浮动。

CSS：

#mainbody {
    position:relative;
}
#left {
    position:absolute;
    width:250px;
}
#main {
    float: left;
    margin-left: 260px;
    width:80%;
}

问题：div“left”的高度被忽略，而div“footer”从div“main”结束的地方开始，尽管div“left”的高度大于div“main”。

- Yannis

---

必须查看CSS才能准确回答。 - Scott

Answer 1

如果您不希望后续元素受到影响，需要在浮动元素后添加clear。有两种方法可以实现：

1. 在后续元素中添加css clear:both或clear:right（例如在div#left后添加一个p元素，或在#footer上添加）。 2. 在div#mainbody中添加overflow:auto。

顺便说一下，如果您想要更具体或准确的答案，建议您同时提供html和css代码。

- Vigrond

Answer 2

你需要的是清除浮动，这样你的元素就能正确加载。请参阅链接的SO问题“哪种“清除浮动”方法最好？”以获取众多可能的清除浮动方法。 footer元素放在main元素旁边的原因是绝对定位元素从页面流中移除。因此，后续元素将绝对定位元素视为根本不存在。使用清除浮动可以解决这个问题。

- Kevin Ji