1 <style> 2 #main{ 3 margin-right:auto; 4 margin-left:auto; 5 padding-top:30px; 6 height:auto !important;/*FF*/ 7 height:100px;/*IE*/ 8 background-color:#FFF; 9 border-width:1px; 10 border-style:solid; 11 border-color:#000; 12 } 13 #main:after{content:"blue";height:0;display:block;clear:both;} 14 /*-------------------------in the #main layer-------------------------*/ 15 #thumbnails{ 16 float:left; 17 margin-right:auto; 18 margin-left:auto; 19 padding:0; 20 background-color:#FFF; 21 width:258px; 22 height:162px; 23 border-width:1px; 24 border-style:solid; 25 border-color:#F00; 26 text-align:center; 27 vertical-align:middle; 28 } 29 </style> 30 <div id=main> 31 <div id="thumbnails"> 32 子级 33 </div> 34 <div id="thumbnails"> 35 子级 36 </div> 37 <div id="thumbnails"> 38 子级 39 </div> 40 <div id="thumbnails"> 41 子级 42 </div> <div id="thumbnails"> 43 子级 44 </div> <div id="thumbnails"> 45 子级 46 </div> <div id="thumbnails"> 47 子级 48 </div> <div id="thumbnails"> 49 子级 50 </div> <div id="thumbnails"> 51 子级 52 </div> 53 父级 54 </div>
清除浮动：
1.用clear: both;的话要在所有浮动层后面加个无意义的标签；也就是说在你那四个子层后面加个无意义的标签用来清除浮动。
2.推荐使用overflow: auto;在父层加个overflow: auto; 可兼容IE6和FF，IE7未测试！
3,另外还有一种清除浮动的方法是在最后一个层利用:after伪类清除浮动，貌似兼容性不好，可以去搜索一下！
4,可以把你的父层也设置为浮动，这样也可以得到父层的高度，而且兼容性不错，推荐使用！