我想附上两张DIV元素，内部1内-2（红色虚线边框）的包装DIV（固体绿色边框），但包装DIV元素内不会展开到包围内的DIV。
我究竟做错了什么？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
</div>
</body>
</html>
渲染HTML
既然你都漂浮#inner-1和#inner-2 ，你需要一个明确的修复 。 基本上，设置overflow: auto上的父（ #wrapper ）应该做的伎俩。
.
.
.
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<br style="clear:both" />
</div>
.
.
.
尝试。
您可以设置页边距为<br />所以，这是很难看到了。
这是在给你的问题浮动。 这可能会为你工作：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
加入“分区式=”明确：既“>”在含有DIV的底部。
这也可能是值得注意的是，有“清除浮动”在那里的几个不同的方法。 这一次工作得很好，我和只涉及将一个类的父元素：
.clearfix:after{content:"\0020";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
如已经表示你需要迫使包含div来实现浮动的div的一些方法已经采取了空间。 俗称清除浮动，有围绕互联网的话题相当多的讨论。
这篇文章在pathf.com是比较流行使用一种。 当你读了文章，请务必阅读所有的意见为好。
