Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#wrapper{
    width:100%;
    height:auto;
    background-color:#009;
}
#container_left{
    float:left;
    width:200px;
    text-align:center;
    height:100px;
    background-color:#960;
}
#container_right{
    float:right;
    width:200px;
    text-align:center;
    height:100px;
    background-color:#909;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Document</title>
</head>
<body>
<div id="wrapper">
<div id="container_left">
    left div
</div>
<div id="container_right">
    right div
</div>
</div>

</body>
</html>

我曾期望带有id包装器的div具有其内容的高度，但是包装器div似乎已从主体中消失，因为background-color不能正常工作。

当我从内部div元素中删除float:left时会重新出现，但此解决方案对于整体设计不正确。

还有其他解决方案吗？

Answer 1

由于带浮点数的元素，CAN浮出父元素的框

<div id="wrapper">
<div id="container_left">
left div
</div>
<div id="container_right">
right div
</div>
<div style="clear:both; overflow:hidden; height: 0px;">&nbsp;</div>
</div>

你必须将具有清晰样式的元素放在父内容的末尾 - 它将被放置在两个浮动的div下面并且不会浮出框（所以父div将被调整为大小）

其他解决方案是设置父div的高度

Answer 2

当div中的内容浮动时，除非在父div上存在属性height，overflow：auto或display：inline-block，否则无法计算高度

具有样式float的html元素：left

2 个答案: