高于绝对div和溢出的div

Question

我有一个设置，其中我有一个绝对div，该绝对div设置为左侧位置和右侧位置，以允许液体布局。 这一切都很好，但是随后我遇到了一个问题，在该问题下我有一个带有一些副本的div。 问题是复制副本的div应该位于绝对位置的div以下。 现在，它显示在它上面，这是不正确的。

我经常看到此问题是由于在将孩子设置为绝对孩子之后折叠了父div，但是为了解决这个问题，我使用了clear all或overflow：hidden隐藏在父对象上，这阻止了崩溃的发生。 这次，它没有崩溃，但是显示了我的底部div高于顶部div。

这是一个jsfiddle链接，向您展示我的代码。

Answer 1

我不确定您为什么认为这行得通。 您有容器footer 。 它包含两个子div- footerWrapper和footerTerms 。

FooterWrapper的位置绝对正确。 因此，它是从所有其他元素的流程中删除的。 footerTerms是footerWrapper的同级兄弟，自然开始于其父代footer的左上方。

当似乎希望footerWrapper影响页面内容流时，为什么将footerWrapper放在绝对位置？ 使其相对或保持静态。

http://jsfiddle.net/mrtsherman/7cNf7/3/

<div class="footer">
    <div class="footerWrapper"> 
    </div>
    <div class="footerTerms">
    </div>
</div>

Answer 2

我可能会误解了您想做什么，但是如果您想要一个流畅的布局，为什么不使用这样的东西：

CSS：

<style type="text/css">
    #footerWrapper {
        background: #ccc;
    }
    #footerWrapper .section {
        float: left;
        width: 33%;
    }
    .clear:after {
        content: " ";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    html[xmlns] .clear {
        display: block;
    }
    * html .clear {
        height: 1%;
    }
</style>

HTML：

<div id="footerWrapper">
    <div class="clear">
        <div class="section">
            Footer section 1<br />
            Footer section 1<br />
            Footer section 1
        </div>
        <div class="section">
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2
        </div>
        <div class="section">
            Footer section 3<br />
            Footer section 3<br />
            Footer section 3
        </div>
    </div>
    <div class="terms">
        Terms
    </div>
</div>

然后，例如，如果您想将页脚钩到页面右侧，则只需编辑#footerWrapper CSS并为其设置宽度和浮点数即可。