1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 } 10 /*浮动*/ 11 /*浮动只有向左和向右浮动*/ 12 /*浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置*/ 13 /*浮动会让元素转换成行内块元素(让浮动的元素并列在一行)*/ 14 /*当父级元素没有设置固定高度,子元素都浮动时,父级元素的高度就无法被撑开 15 解决办法： 16 给父级元素添加overflow:hidden*/ 17 /*停止浮动: 18 a.碰到父级元素的边界会停止 19 b.碰到前面有浮动的元素也会停止 20 c.碰到没有浮动的元素*/ 21 /*清除浮动: 22 a.clear:both(left,right); 23 b.在父级元素添加属性overflow：hidden; 24 c.使用成熟的清除浮动样式，clearfix 25 .clearfix:after,.clearfix:before{content:'';display:table;} 26 .clearfix:after{clear:both;} 27 .clearfix{zoom:1;}*/ 28 29 30 .float{ 31 width: 200px; 32 height: 200px; 33 background-color: yellowgreen; 34 text-align: center; 35 line-height: 200px; 36 /*float: left;*/ 37 } 38 .float1{ 39 width: 200px; 40 height: 200px; 41 background-color: yellow; 42 text-align: center; 43 line-height: 200px; 44 float: right; 45 } 46 .clearfloat{ 47 zoom: 1; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="float"> 53 box1 54 </div> 55 <div class="float1"> 56 box2 57 </div> 58 <div class="clearfloat"> 59 60 </div> 61 </body> 62 </html>