1 <!-- 浮动特性： 2 1、浮动元素有左浮动和有浮动两种 3 2、浮动的元素会向左或向右浮动，碰到父元素边界或者其他元素才停下来 4 3、相邻浮动的块元素可以并在一行，超出父元素的宽度就换行 5 4、浮动让行内元素或者块元素自定转化成行内块元素（此时不会有行内块元素间隙问题） 6 5、浮动元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 7 6、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果 8 7、浮动元素之间没有垂直的margin合并 9 清除浮动：即一般不设置高度，会出现子元素撑不开父元素的宽度，所以需要清除浮动的功能。 10 1、父级元素上增加属性overflow：hidden 11 2、在最后一个子元素的后面加一个空的div，给他样式属性clear：both（不推荐） 12 3、使用成熟的清浮动样式类，clearfix 13 .clearfix:after,.clearfix:before{content:"";display:table;} 将top塌陷合并在一起 14 .clearfix:after{clear:both;} 再单独写清除浮动的属性 15 .clearfix{zoom:1} IE浏览器只能用这个，zoom是指缩放浏览器，1即不放大也不缩小 16 清除浮动的使用方法： 17 .con2{... overflow:hidden} 18 <div class="con2 clearfix">--> 19 <!DOCTYPE html> 20 <html lang="en"> 21 <head> 22 <meta charset="UTF-8"> 23 <title>Document</title> 24 <style type="text/css"> 25 <!-- 两端对齐样式 --> 26 .box{ 27 400px; 28 height: 80px; 29 border: 1px solid gold; 30 margin: 50px auto 0; 31 } 32 .box div{ 33 60px; 34 height: 60px; 35 margin: 10px; 36 } 37 38 .box1{ 39 background-color: green; 40 float: left; 41 } 42 43 .box2{ 44 background-color: pink; 45 float: right; 46 } 47 48 /* 九宫格样式 */ 49 .con{ 50 400px; 51 height: 400px; 52 border: 1px solid black; 53 margin: 50px auto 0; 54 } 55 56 .con div{ 57 100px; 58 height: 100px; 59 float: left; 60 background-color: gold; 61 margin: 15px; 62 63 } 64 </style> 65 </head> 66 <body> 67 <div class="box"> 68 <div class="box1"></div> 69 <div class="box2"></div> 70 </div> 71 72 <!-- .con>div{$}*9 --> 73 <div class="con"> 74 <div>1</div> 75 <div>2</div> 76 <div>3</div> 77 <div>4</div> 78 <div>5</div> 79 <div>6</div> 80 <div>7</div> 81 <div>8</div> 82 <div>9</div> 83 </div> 84 </body> 85 </html>