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> ~ ~