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>
