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         
28         .clearfix:after {
29             content: '.';  /*尽量跟一个小点 .*/
30             display: block;
31             /* 转化为块级元素*/
32             height: 0;
33             visibility: hidden;
34             clear: both;
35         }
36         
37         .clearfix {
38             /* 兼容ie 六七 */
39             *zoom: 1;
40         }
41         
42         .one {
43             width: 100px;
44             height: 100px;
45             background: red;
46             float: left;
47         }
48         
49         .two {
50             width: 100px;
51             height: 200px;
52             background: honeydew;
53             float: left;
54         }
55         /* .clear {
56             clear: both;
57         } */
58         
59         .box2 {
60             width: 400px;
61             height: 200px;
62             background: pink;
63         }
64         /* 产生一个行内元素 ,尾部 */
65         /* p:after{
66                       content:'' //可以放文本  图片
67 
68         } */
69     </style>
70 </head>
71 
72 <body>
73     <p>我们的歌谣</p>
74     <div class="box1 clearfix">
75         <div class="one"></div>
76         <div class="two"></div>
77         <!-- <div class="clear"></div> -->
78     </div>
79     <div class="box2"></div>
80 </body>
81 
82 </html>