over-float清除浮动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 border: 1px solid red; 9 overflow: hidden;<!--
相当于子太大父亲包不住,overflow:scroll是滚动条--> } 11 .item{ 12 width: 200px; 13 height: 200px; 14 background-color: black; 15 float: left; 16 } 17 </style> 18 <!-- 19 清除浮动的方法 20 1、加高度 (扩展性不好) 21 2、给父级加浮动 (页面中所有元素都加浮动,margin左右自动失效(floats bad !)) 22 3、.inline-block 清浮动方法 (margin左右auto失效) 23 4、空标签清除浮动 (IE6 最小高度 19px;(解决后IE6下还有2px偏差)) 24 5、.br清浮动 (不符合工作中:结构、样式、行为,三者分离的要求) 25 26 --> 27 </head> 28 <body> 29 <div class="box"> 30 <div class="item"></div> 31 </div> 32 </body> 33 </html>