overflow:auto zoom:1

ref: http://hi.baidu.com/heaven0216/blog/item/fc538924cc11546b34a80fbd.html

 

 overflow也可以用來清除浮動，而且FF、OP、IE7都支援。

方法很簡單，只要為需要清浮動的標籤加上overflow這個屬性。CSS代碼ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}.overflow{overflow:auto;zoom:1;background-color:#43FF73;}HTML代碼<div class="demo"><ul class="overflow"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="demo"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>其中zoom是為了IE6準備的。註：忘了一個很重要的內容，並不是所有的overflow屬性都可起來一樣的效果，比如visible屬性就只能對IE起作用。例子可以看這裡Demo2這樣的話就有一個問題啦，如果要有高度，而且內容超出高度的時候，定義auto或hidden都可能會有一些不想要的效果出現。這裡提供一個解決方案：對於IE6及以下版本的IE，可以直接定義高度；對於IE7、FF、OP，可定義min-height。CSS代碼overflow{height:auto;_height:200px;min-height:200px;verflow:auto;zoom:1;_overflow:visible;}閉合浮動元素：針對firefox用overflow:auto。針對ie用*height:1%或者zoom:1。個人覺得overflow:auto少用為妙，會有些莫明其妙的問題。最好用這個方法：.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}/* Hides from IE-mac \*/* html .clearfix {height: 1%;}/* End hide from IE-mac */