Question

我知道关于这个话题已经有很多帖子了，但是我无法设法让这个工作起来，对不起吧......

所以我在彼此旁边有2个div元素，左边是正常静态元素，右边是浮动元素，但它并不会影响它的父级高度。我该如何解决这个烦人的问题？

<div id="content">
<div id="sidebar">
</div>
<div id="articles">
</div>
</div>

#content {
    background-color: #efefef;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    margin: auto;
    width: 1200px;
    margin-top: 55px;
    padding: 20px 0 20px 0;
}

#articles {
    width: auto;
    border-right: 1px solid grey;
    overflow: hidden;
    padding: 25px;
    font-family: reef;
}

#sidebar {
    margin-right: 10px;
    overflow: hidden;
    width: 300px;
    float: right;
}

Answer 1

清除容器

#content:before,
#content:after {
    content: " ";
    display: table;
}

#clearfix:after {
    clear: both;
}

以上代码段来自html5boilerplate。作者声明了上述解决方案：

空间内容是一种避免Opera bug的方法    contenteditable属性包含在文档的任何其他位置。否则会导致空间出现在顶部和底部   接收clearfix类的元素。

仅在使用table包含子元素的上边距时才需要使用block而不是:before。

Answer 2

尝试为#content设置overflow:hidden。

这篇文章有一些关于为什么这可以解决float-container-height问题的更多信息： Overflow:hidden in float. Does it hide anything?

Answer 3

尝试将css设置为相对位置...

#sidebar {
margin-right: 10px;
overflow: hidden;
width: 300px;
float: right;
position: relative;

}

http://codepen.io/bevanz/pen/VLrbxJ＆lt; - 可能是在div中没有内容的问题。 Mycode笔显示我的意思！

浮动元素不会影响高度

3 个答案: