1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 8 .list{ 9 210px; 10 /*height: 400px;*/ /* 实际开发中经常不设置高度，导致子元素无法撑开父元素，所以需要清除浮动 */ 11 border: 1px solid black; 12 margin: 50px auto 0; 13 list-style: none; 14 padding: 0; 15 /*overflow: hidden;*/ /* 清除浮动的第一种方法 */ 16 17 } 18 19 .list li{ 20 50px; 21 height: 50px; 22 background-color: gold; 23 margin: 10px; 24 float: left; 25 } 26 27 /*.clearfix:before{ 28 content: ''; 29 display: table; 30 } 解决top塌陷的问题*/ 31 32 /*.clearfix:after{ 33 content: ''; 34 display: table; 35 clear: both; 36 } 清除浮动，一般和top塌陷一起放在公共样式中，先写组，将相同的属性放在一起，然后再写单独的 */ 37 38 .clearfix:before,.clearfix:after{ 39 content: ''; 40 display: table; 41 } 42 43 .clearfix:after{ 44 clear: both; 45 } 46 47 .clearfix{ 48 zoom:1; /* IE浏览器独用 */ 49 } 50 </style> 51 </head> 52 <body> 53 <!-- ul.list>li{$}*8 --> 54 <ul class="list clearfix"> 55 <li>1</li> 56 <li>2</li> 57 <li>3</li> 58 <li>4</li> 59 <li>5</li> 60 <li>6</li> 61 <li>7</li> 62 <li>8</li> 63 <!-- <div style="clear:both"></div> 第二种清除浮动的方式 --> 64 </ul> 65 </body> 66 </html>