1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
 
< style >
     /* 方法一 */
     /*.clearfix{overflow:hidden;_zoom:1;}*/
 
     /* 方法二 */
     /*.clearfix{overflow:auto;_height:1%}*/
 
     /* 方法三 */
     /*.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden}*/
     /*.clearfix{*+height:1%;}*/
 
 
     .container>div{
         width:200px;
         height:100px;
         float:left;
     }
 
     .red{
         background-color: red;
     }
 
     .green{
         background-color:green;
     }
 
     .black{
         background-color:black;
     }
</ style >
 
< body >
     < div  class = "container clearfix" >
         < div  class = "red" ></ div >
         < div  class = "green" ></ div >
         < div  class = "black" ></ div >
     </ div >
 
     <!-- 方法四 -->
     <!--<div style="clear:both"></div>-->
 
     < div >
         浮动框测试 ...2
     </ div >
</ body >
</ html >