css - 包含小于子元素的 div

Question

鉴于以下

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}

<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

(参见:http://jsfiddle.net/ericjohannsen/JCPEH/1/)

为什么 container 显然没有任何区域(也就是说，它的高度为零，加上边框)？我天真地期望它和它包含的子 div 一样高。

设置它的正确方法是什么，以便包含两个 child 的 div 和 child 一样高？

Answer 1

您需要清除 float 。您可以通过 clearfix 类来执行此操作:

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}

<div id='container' class="clearfix">
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

或清算元素:

.clear {
  clear:both;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}

<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
    <div class="clear"><!-- --></div>
</div>

更新 fiddle : http://jsfiddle.net/JCPEH/5/