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>
