浮動一直是我們編寫網頁最常用的方法，但是也是最不聽話的，一不小心會亂跑，雖然有萬能的float閉合div多寫一個可以解決掉，但是為了清除浮動而多出來一個空的div實在看著不爽，這裡我在網上找到了兩種解決的辦法，相信很多朋友已經在用了，不過還是列出來，以備後用。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>無標題文檔</title><br /><mce:style type="text/css"><!--<br /> ul{<br /> list-style:none;<br /> height:auto;<br /> margin:0;<br /> padding:0;<br /> background-color:#436973;<br /> }<br /> li{<br /> float:left;<br /> width:80px;<br /> height:120px;<br /> background-color:#83B1DF;<br /> }<br /> .demo{<br /> clear:both;<br /> border:1px solid #FF00FF;<br /> margin-bottom:5px;<br /> }<br /> .overflow{<br /> height:auto;<br /> _height:200px;<br /> min-height:200px;<br /> overflow:auto;<br /> zoom:1;<br /> _overflow:visible;<br /> }<br /> .clear:after {<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br /> }/*for w3c*/<br /> .clear {<br /> zoom:1;<br /> }/*for IE*/<br />--></mce:style><style type="text/css" mce_bogus="1"> ul{<br /> list-style:none;<br /> height:auto;<br /> margin:0;<br /> padding:0;<br /> background-color:#436973;<br /> }<br /> li{<br /> float:left;<br /> width:80px;<br /> height:120px;<br /> background-color:#83B1DF;<br /> }<br /> .demo{<br /> clear:both;<br /> border:1px solid #FF00FF;<br /> margin-bottom:5px;<br /> }<br /> .overflow{<br /> height:auto;<br /> _height:200px;<br /> min-height:200px;<br /> overflow:auto;<br /> zoom:1;<br /> _overflow:visible;<br /> }<br /> .clear:after {<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br /> }/*for w3c*/<br /> .clear {<br /> zoom:1;<br /> }/*for IE*/</style><br /></head><br /><body><br /> <div class="demo"><br /> <ul class="overflow"><br /> <li>1</li><br /> <li>2</li><br /> <li>3</li><br /> <li>4</li><br /> <li>5</li><br /> <li>6</li><br /> <li>7</li><br /> <li>8</li><br /> <li>9</li><br /> </ul><br /> </div><br /> <div class="demo"><br /> <ul class="clear"><br /> <li>1</li><br /> <li>2</li><br /> <li>3</li><br /> <li>4</li><br /> <li>5</li><br /> <li>6</li><br /> <li>7</li><br /> <li>8</li><br /> <li>9</li><br /> </ul><br /> </div><br /></body><br /></html>
最近在網上看到有朋友想出了新招來清除浮動，顯得更簡潔，貼在這裡，與之比較：
<mce:style type="text/css"><!--</p><p>.clearfix {zoom:1}<br />.clearfix:after {<br />content: '/20';<br />display: block;<br />clear: both;<br />}<br />ul{border:1px solid #ccc}<br />ul li{float:left;width:120px;line-height:25px;text-align:center}<br />--></mce:style><style type="text/css" mce_bogus="1"><br />.clearfix {zoom:1}<br />.clearfix:after {<br />content: '/20';<br />display: block;<br />clear: both;<br />}<br />ul{border:1px solid #ccc}<br />ul li{float:left;width:120px;line-height:25px;text-align:center} </style><br /><ul class="clearfix"><li>選項一</li><li>選項二</li><li>選項三</li></ul>
原文：http://www.ajaxbbs.net/post/webFront/simple-clear-float.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
