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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 #box {
8 border:#FF0000 solid 1px;
9 }
10 #left {
11 width:200px;
12 background-color:#333333;
13 float:left;
14 }
15 #right {
16 width:200px;
17 background-color:#0000FF;
18 float:left;
19 }
20 /*清理浮动
21 原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。
22 不同的是，隐藏这个空白使用的是 display: table。
23 而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。
24 值得注意的是这里中的 :before 伪类。
25 其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。
26 但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom
27 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。
28 */
29 .cf:before, .cf:after {
30 content:"";
31 display:table;
32 }
33 .cf:after {
34 clear:both;
35 }
36 .cf {
37 zoom:1;
38 }
39 </style>
40 </head>
41
42 <body>
43 <div id="box">
44 <div id="left">左</div>
45 <div id="right">右</div>
46 <div class="cf"></div>
47 </div>
48 </body>
49 </html>
