<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>父容器高度自适应</title>
<style type="text/css">
.test {width:454px;background:blue;float:left;}/*第一种|overflow:hidden 第二种*/
.test .tleft {float:left;width:200px;background:yellow;}
.test .tright {float:right;height:500px;width:200px;background:green;}
.test .clearfloat {clear:both;}/*第三种*/
</style>
</head>
<body >
<div class="test">
<div class="tleft">left</div>
<div class="tright">right</div>
<!-- <div class="clearfloat"></div> -->
</div>
</body>
</html>
[/hcode][separator]
比较好用的方法有：1、overflow:hidden；2、<div class="clearfloat"></div>
今天突然发现让父容器浮动也能达到这个效果，只是用起来要捎带注意点而已。
[hcode]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>父容器高度自适应</title>
<style type="text/css">
.test {width:454px;background:blue;float:left;}/*ouverflow:hidden;这是第三种方法，float:right;}*/
.test .tleft {float:left;width:200px;background:yellow;}
.test .tright {float:right;height:500px;width:200px;background:green;}
.test .clearfloat {clear:both;background:red;}
</style>
</head>
<body >
<div class="test">
<div class="tleft">left</div>
<div class="tright">right</div>
<!--<div class="clearfloat"></div>去掉这里的注释是二种方法-->
</div>
</body>
</html>
