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一样高。

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

Answer 1

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

Answer 2

这是因为floats在清除之前不属于布局。

Answer 3

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

You can enlighten yourself here

Answer 4

在关闭big div之前

添加<div id="clear"></div>并在css中添加#clear {clear：both;}

Answer 5

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

包含小于儿童的div

5 个答案: