html - float 元素不影响高度

Question

我知道已经有很多关于这个主题的帖子了，但我就是无法让它发挥作用，对此深表歉意..

所以我有 2 个 div 元素并排放置，左边一个是普通静态元素，右边一个是 float 元素，但它不会影响其父元素的高度。我该如何解决这个恼人的问题？

<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。作者针对上述解决方案声明:

1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the clearfix class.
2. The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.