第一种：
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.mytest
{
100px;
height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大</div>
</body>
</html>
第二种：
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.mytest
{
100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大阴</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
200px;
}
.children
{
200px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代码中，父元素只规定了宽度没有规定高度，子元素在正常的文档流中，所以子元素能够将父元素撑开。
再看下面这一实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
200px;
}
.children
{
200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
从上面代码的运行可以看出，父元素并没有被撑开，这个是因为子元素float属性值设置为left，从而脱离了文档流。如果想让上面的父元素达到高度自适应，就要清除子元素的浮动。修改代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
200px;
overflow:hidden;
}
.children
{
200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代码通过给父元素的样式中添加overflow:hidden即可清除浮动。
如果说父元素就像最开始的例子一样，固定了高度，并且还要实现高度自适应效果，就可以参阅元素中内容是文本的情况，解决方法是一样的。代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
200px;
height:auto!important;
height:100px;
min-height:100px;
}
.children
{
200px;
height:200px;
float:left;
background-color:green;
}
.clear
{
clear:both;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
<div class="clear"></div>
</div>
</body>
</html>