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>
