css 完美清除浮動的兩種解決方案

2024-07-11 08:44:38

字體：大中小

來源：轉載

供稿：網友

浮動一直是我們編寫網頁最常用的方法，但是也是最不聽話的，一不小心會亂跑，雖然有萬能的float閉合div多寫一個可以解決掉，但是為了清除浮動而多出來一個空的div實在看著不爽，這里我在網上找到了兩種解決的辦法，相信很多朋友已經在用了，不過還是列出來，以備后用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>完美清除浮動的兩種解決方案</title> <style type="text/css"> ul{ list-style:none; height:auto; margin:0; padding:0; background-color:#436973; } li{ float:left; width:80px; height:120px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5px; } .overflow{ height:auto; _height:200px; min-height:200px; overflow:auto; zoom:1; _overflow:visible; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/*for w3c*/ .clear { zoom:1; }/*for IE*/ </style> </head> <body> <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 class="clear"> <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> </body> </html>

提示：您可以先修改部分代碼再運行

上一篇：純css 鼠標移上查看大圖的效果

下一篇：CSS 瀏覽器兼容問題整理大全(比較全)