CSS-clear屬性的作用
阿新 • • 發佈：2020-11-16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 height:100px; 10 background-color:yellow; 11 float:left; 12 } 13 .box2{ 14 width:100px; 15 height:100px; 16 background-color:orange; 17 /*clear:left;*/ 18 /*clear:right;*/ 19 clear:both; 20 } 21 .box3{ 22 width:200px; 23 height:300px; 24 background-color:#bfa; 25 float:right; 26 } 27 /* 28 如果我們不希望某個元素因為其他元素浮動的影響二改變位置，可以通過cle ar屬性來清除浮動元素對當前元素的所產生的影響 29 clear: 30 -作用：清除浮動元素對當前元素所產生的影響 31 -可選值 32 -left清除左側元素對當前元素的影響 33 -right清除右側元素對當前元素的影響 34 -both清除兩側影響中對該元素的位置影響最大的 35 原理： 36 設定清除浮動之後，瀏覽器會自動為元素新增一個上外邊距，> 使其不受浮動元素的影響 37*/ 38 </style> 39 </head> 40 <body> 41 <div class="box1"></div> 42 <div class="box2"></div> 43 <div class="box3"></div> 44 </body> 45 </html> ~ ~