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>
