绝对定位的div的高度被忽略

Question

我有这个简单的HTML结构：

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

股利“型主体”具有位置：相对的。 div“left”在页面左侧拥有绝对位置和动态高度。 div“main”浮动在div左边的左边。

CSS：

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

的问题：格“左”被忽略，格“页脚”开始，在格“主”，即使在div“左”结尾的高度比格大高度“主要”。

Answer 1

你所寻找的是一个clearfix让你的元素将正常加载。众多可能clearfixes见the linked SO question "Which method of 'clearfix' is best?"。

之所以footer元素的地方我main元素旁边的自己是因为绝对定位的元素从页面流中删除。结果，后来的元素将绝对定位的元素视为不在那里。有了clearfix，这个问题就解决了。

Answer 2

如果您不希望以下元素受到影响，您需要在浮动元素之后添加一个清除。

这是可以实现两种方式：

1. 添加CSS明确：双方或明确：右到下一个元素。 （如后DIV＃向左或#footer的

2. 添加溢出：汽车到div的＃型主体

顺便说一句，如果你想更具体的或准确的答案，我建议你包括你的HTML和CSS。