Code
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>test</title>
5 <style type ="text/css">
6 .main{}{
7 width:400px;
8 background:#333333;
9 color:#ffffff;
10 }
11 .content{}{
12 float:left;
13 width:200px;
14 background:#cccccc;
15 color:#000000;
16 }
17 .clear{}{
18 clear:both;
19 }
20 </style>
21</head>
22<body>
23<div class="main">
24 <div class="content">
25 高度自适应的例子,注意元素高度的变化。高度自适应的例子,注意元素高度的变化。
26 </div>
27 父元素中的内容
28 <div class = "clear"></div>
29</div>
30</body>
31</html>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>test</title>
5 <style type ="text/css">
6 .main{}{
7 width:400px;
8 background:#333333;
9 color:#ffffff;
10 }
11 .content{}{
12 float:left;
13 width:200px;
14 background:#cccccc;
15 color:#000000;
16 }
17 .clear{}{
18 clear:both;
19 }
20 </style>
21</head>
22<body>
23<div class="main">
24 <div class="content">
25 高度自适应的例子,注意元素高度的变化。高度自适应的例子,注意元素高度的变化。
26 </div>
27 父元素中的内容
28 <div class = "clear"></div>
29</div>
30</body>
31</html>
适用情况:当浮动元素的高度大于父元素时,才有效。