1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>清除浮动</title>
 8     <style>
 9         /* 清楚浮动方法
10                    (1) :额外标签法
11                    (2) :父级添加overflow 属性
12                      通过BFC 的方式,可以实现清楚浮动的效果
13                        可以给父级添加:overflow 为hideden | auto |scroll
14                    (3) :使用after 伪元素
15                    (4) :使用before 和after 双伪元素
16                    --->额外标签法
17                       通过 浮动元素末尾添加一个字的标签: 例如:<div style="clear:both"> </div>
18 
19                    */
20         
21         .box1 {
22             width: 400px;
23             background: green;
24             /* 触发BFC  ,如果内容自动清楚会导致隐藏效果 */
25             /* overflow: hidden; */
26         }
27         /*.clearfix:after {*/
28         /*  content: '.';*/
29         /*尽量跟一个小点 .*/
30         /*  display: block;*/
31         /* 转化为块级元素*/
32         /*   height: 0;
33             visibility: hidden;
34             clear: both;
35         }*/
36         /* .clearfix {
37             /* 兼容ie 六七 */
38         /*  *zoom: 1;
39         }*/
40         
41         .clearfix:after,
42         .clearfix:before {
43             content: '.';
44             display: table;
45         }
46         
47         .clearfix:after {
48             clear: both;
49         }
50         
51         .clearfix {
52             *zoom: 1;
53         }
54         
55         .one {
56             width: 100px;
57             height: 100px;
58             background: red;
59             float: left;
60         }
61         
62         .two {
63             width: 100px;
64             height: 200px;
65             background: honeydew;
66             float: left;
67         }
68         /* .clear {
69             clear: both;
70         } */
71         
72         .box2 {
73             width: 400px;
74             height: 200px;
75             background: pink;
76         }
77         /* 产生一个行内元素 ,尾部 */
78         /* p:after{
79                       content:'' //可以放文本  图片
80 
81         } */
82     </style>
83 </head>
84 
85 <body>
86     <p>我们的歌谣</p>
87     <div class="box1 clearfix">
88         <div class="one"></div>
89         <div class="two"></div>
90         <!-- <div class="clear"></div> -->
91     </div>
92     <div class="box2"></div>
93 </body>
94 
95 </html>