12

鉴于以下

#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我天真地期望它和它所包含的孩子一样高。

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

4

5 回答 5

20

你需要清除你的浮动。您可以通过 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>

更新小提琴：http: //jsfiddle.net/JCPEH/5/

于 2013-02-07T19:07:06.283 回答
4

这是因为floats它们在被清除之前不是布局的一部分。

于 2013-02-07T19:06:33.160 回答
1

像float其他一些“命令”（如位置相对/绝对/修复）从正常渲染流中删除元素。
结果之一是，它不再影响其父元素的渲染方式。

你可以在这里开悟

于 2013-02-07T19:07:00.620 回答
1

在关闭大 div 之前添加一个<div id="clear"></div>并在 css 中添加 #clear{clear:both;}

于 2013-02-07T19:07:01.697 回答
0

将容器的位置设置为绝对位置，这样可以解决问题。http://jsbin.com/ifojug/1/ jsfiddle 由于某种原因无法在我的浏览器上运行

于 2013-02-07T19:09:33.703 回答