html - 忽略绝对定位的 div 的高度

Question

我有这个简单的 html 结构:

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

div“mainbody”的位置是:相对的。 div“left”在页面左侧具有绝对位置和动态高度。 div“main” float 在div“left”的右侧。

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”。

Answer 1

您正在寻找的是 clearfix这样你的元素就会正确加载。参见 the linked SO question "Which method of 'clearfix' is best?"对于许多可能的 clearfixes。

footer 元素将自己放在main 元素旁边的原因是因为绝对定位元素已从页面流中移除。结果，后面的元素将绝对定位的元素视为最初不存在的元素。使用 clearfix，此问题已解决。