给定
HTML
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
和CSS
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
(见：http://jsfiddle.net/ericjohannsen/JCPEH/1/)
为什么容器显然没有任何区域(即它的高度为零,加上边框)？我天真地期望它与它包含的孩子div一样高.
设置这个的正确方法是什么,使含有两个孩子的div与孩子一样高？
解决方法
你需要清除你的浮标.您可以通过clearfix类或清除元素来执行此操作.
CSS
.clearfix:before,.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
HTML
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
要么
CSS
.clear {
clear:both;
}
HTML
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
