CSS使内部浮动元素的非浮动容器高度答案

【问题标题】：CSS make non-floating container height of floated elements insideCSS使内部浮动元素的非浮动容器高度
【发布时间】：2014-03-30 12:36:14
【问题描述】：

浮动元素（两个页眉部分、一个容器和一个页脚），我试图将页脚放在容器下方。容器内的所有内容都浮动并溢出，因此容器本身的高度为零，并且页脚显示在我的一些内容下方，如下所示（它是下部的红色条）：

如何在不固定高度或浮动容器的情况下使容器与其包含的内容高度相同？

这是 index.html 的正文：

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container">
        <div id="featureBar">
            <div class="feature"></div>
            <div class="feature"></div>
            <div class="feature last"></div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

这是样式表：

/**
* ========== HEADER ==========
*/

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}

.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}

/**
* ========== HOME PAGE ==========
*/

#featureBar {
    margin-top: 50px;
}

.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}

.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

/**
* ========== FOOTER ==========
*/

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}

【问题讨论】：

嗯编辑不起作用。第一句话缺少一些文字，应该是“嘿，我有四个非浮动元素......”
答案是here 和here
@Mr.外星人 - 他不想float。嗯。您是否考虑过脚本......？ 与 CSS 垂直对齐本来就很困难，但如果您愿意，我可以提供帮助。 ...无需使其固定高度或浮动容器...
@NicholasHazel 我没有读过这个问题，我能闻到未清理的花车，我确定这就是他想要的
@NicholasHazel 是的，这与我在clear: both; 答案中定义的相同，因为他的元素正在向上移动，因为浮动未清 :)

标签： css height overflow

【解决方案1】：

添加到您的 css..

.container{
  height: auto;
  margin: 5px; // optional
}

【讨论】：

【解决方案2】：

如果我理解正确，您需要做的就是在容器结束之前清除浮动。

1.您可以简单地在容器结束前应用一个清除 div。

<div style="clear:both;"></div>

2. 然而，我个人的偏好是创建一个清算类：（在样式表的末尾以最大限度地提高特异性）。

.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

然后简单地将这个类应用于任何浮动元素的包含 div。结果是包含 div 将在关闭之前清除浮动。

所以对于你上面的代码。

HTML

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container CF">Container
        <div id="featureBar">
            <div class="feature">Feature 1</div>
            <div class="feature">Feature 2</div>
            <div class="feature last">Feature 3</div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

CSS

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}    
.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}  
#featureBar {
    margin-top: 50px;
}    
.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}    
.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}
.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

在这里演示

http://jsfiddle.net/s87uP/4/

【讨论】：