<html>
<head>
<title>
exmpall
</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<STYLE type="text/css">
div{
padding: 0;
margin: 0;
position: absolute;
left:200px; /*左邊*/
top:0; /*上面*/
display: none;
width: 180px;
height: 150px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
function myfunction1()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "50px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#E4A17C";
}
function myfunction2()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "150px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#A3935F";
}
function myfunction3()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "200px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#79851A";
}
function myfunction4()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "300px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#ACACA9";
}
function myfunction5()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "400px"; /*上面*/
my.style.display = "inline";
my.style.backgroundColor = "#B38DD9";
}
// -->
</SCRIPT>
</head>
<body>
<FORM method="post" action="">
<br /><br />
<INPUT name="text1" type="text" onmouseover="myfunction1()"><br /><br /><br /><br />
<INPUT name="text2" type="text" onmouseover="myfunction2()"><br /><br /><br /><br />
<INPUT name="text3" type="text" onmouseover="myfunction3()"><br /><br /><br /><br />
<INPUT name="text4" type="text" onmouseover="myfunction4()"><br /><br /><br /><br />
<INPUT name="text5" type="text" onmouseover="myfunction5()"><br /><br />
</FORM>
<div id="chenyi">
<ol>
<li><a >高興</a></li>
<li>php</li>
<li>asp.net</li>
<li>javaEE</li>
<li>javascript</li>
</ol>
</div>
</body>
</html>
]]>
1.HTML頁面直接寫
<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:pointer;" />
2.JS中寫
在IE中需要通過"filter"來定義透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得這個效 果在兩種瀏覽器中都得到支持，需要把兩種設定都加進去。針對IE的設定：this.filters.alpha.opacity=50 而針對 Mozilla的設定：this.style.MozOpacity=0.5
3.CSS樣式表中寫
css代碼里這樣寫就可以：
.div {
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*Mozilla*/
}
]]>
理解 CSS 盒子模型
如果你想實現不需要很多奇巧淫技的跨瀏覽器兼容的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。
CSS 盒子模型負責處理以下事情:
CSS 盒子模型有以下準則:
處理 block 級對象時，必須注意以下事項:
在 Firefox 的 Firebug 中顯示的盒子模型
理解 block 級和 inline 級 對象的區別
這個看似簡單的問題事如果能透徹地理解，會受益匪淺。
下圖講解了 block 級對象和 inline 級對象的區別:
下面是 block 級對象和 inline 級對象的基本區別:
實現多欄排版的最好方法是使用 float 屬性，float 也是一個將使你受益匪淺的屬性。一個 float 對象可以居左或居右，一個設置為 float 的對象，將根據設置的方向，左移或右移到其父容器的邊界，或其前面的 float 對象的邊界，而緊隨其后的非 float 對象或內容，則包圍在其相反的方向。
以下是使用 float 和 clear 屬性的一些重要準則:
雖然我們都痛恨 IE6 和 IE7，但當你開始一個新項目的時候，最好還是首先針對這兩種瀏覽器進行測試，否則，如果你在設計在后期才想起針對 IE6 和 IE7 進行測試，將出現以下問題：
如果你設計的是個人項目，Web 程序等，則不建議你針對舊版本 IE 做太多工作，而對一些公司類站點，它的用戶群中有大量 IE 用戶，這些技巧會讓你避免大量的頭痛。如果將 IE 的問題歸類為 IE 的 BUG 而不去處理，會帶來很多負面的影響，和 IE 和平共處是 Web 開發與設計者不可逃避的現實。
譯者注：在 IE6/7 仍有大量用戶基礎的國內（感謝中行，建行，農行，工行，以及各級政府網站），忽視這兩種瀏覽器是極不明智的，首先針對 IE6/7 進行設計是一種很好的方法，一般來說，在IE6/7 通過測試的站點，在 Firefox，Chrome，Safari，Opera 等標準瀏覽器面前基本不會出現問題，前提是，你的 CSS 設計是基于 W3C 標準的。
IE 瀏覽器最常見的問題
在不同瀏覽器實現相同的體驗個功能是可能的，實現近似像素級的一致外觀也是可能的，但永遠不要指望一模一樣。
Form 控件在不同瀏覽器顯示總是不同
以下是 Facebook 首頁中的 select 控件，在5種不同瀏覽器的顯示差異（基于 Adobe’s Browserlab 截圖）
某些 Form 控件，如果要求必須跨瀏覽器一致，可以找到變通辦法，如，可以使用圖片 替代 submit 按鈕，但有一些控件，比如 radio，select， textarea，文件選擇框，是永遠都不可能一模一樣的。
字體的表現都有差異
先不談有的字體在有的系統中根本不存在，即時存在，它們在不同系統的渲染效果也不完全一樣，比如，Windows ClearType 支持 IE7，但不支持 IE6，導致同一個字體在 IE7 和 IE6 有不同的樣子。
A List Apart’s 文章字體在 IE6 and IE7 中的區別
使用 CSS 清零
使用 CSS 清零（CSS Reset）是實現跨瀏覽器兼容的靈丹妙藥，CSS 清零可以消除不同瀏覽器對 margin，padding 這些屬性的默認表現，你可以更容易控制諸如對齊，間隙等等問題。推薦使用 Eric Meyer’s CSS 清零代碼。
參考 SitePoint’s CSS 兼容表
SitePoint CSS Reference 是一個非常好的資源（下載離線版），可以用來檢查某些 CSS 屬性的跨瀏覽器兼容問題
結語
跨瀏覽器兼容是個永恒的話題，本文介紹的跨瀏覽器兼容 CSS 準則只是幫助 Web 開發設計者盡可能實現這一目標，除了這些，基于 CSS3 的漸進式增強設計也是一種趨勢，Web 開發與設計者可以針對某些瀏覽器提供增強功能，而在不支持這些增強功能的瀏覽器中降級使用基本功能。
延伸閱讀
本文國際來源：Smashing Magazine The Principles Of Cross-Browser CSS Coding
原文作者：Louis Lazaris
Louis Lazaris 是一位自由職業 Web 開發者，住在多倫多，他創辦了 Impressive Webs, 以及 Interviews by Design，后者主要是一些著名 Web 設計師訪談，他的 Twitter 地址是 http://twitter.com/ImpressiveWebs。
中文編譯來源：銳商企業CMS 網站內容管理系統 官方網站
]]>
友情提示：請勿在IE下瀏覽。
查看實例：http://www.jankoatwarpspeed.com/examples/windows7menu/
點擊下載：http://www.36ria.com/wp-content/plugins/download-monitor/download.php?id=170
來看下原作者的設計草圖：
簡明創建過程
第一步 ：創建如下菜單結構
<div id="startmenu">
<ul id="programs">
<li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa>li>
<li><a href="#"><img src="chrome.png" alt="" />Google Chromea>li>
<li><a href="#"><img src="safari.png" alt="" />Safaria>li>
<li><a href="#"><img src="opera.png" alt="" />Operaa>li>
<li><a href="#"><img src="ie.png" alt="" />Internet Explorera>li>
<li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa>li>
<li><a href="#"><img src="twitter_32.png" alt="" />Twittera>li>
<li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa>li>
ul>
<ul id="links">
<li class="icon"><img src="folder.png" alt="" />li>
<li><a href="#"><span>Documentsspan>a>li>
<li><a href="#"><span>Picturesspan>a>li>
<li><a href="#"><span>Musicspan>a>li>
<li><a href="#"><span>Computerspan>a>li>
<li><a href="#"><span>Networkspan>a>li>
<li><a href="#"><span>Connect tospan>a>li>
ul>
div>
<ul id="programs">
<li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa>li>
<li><a href="#"><img src="chrome.png" alt="" />Google Chromea>li>
<li><a href="#"><img src="safari.png" alt="" />Safaria>li>
<li><a href="#"><img src="opera.png" alt="" />Operaa>li>
<li><a href="#"><img src="ie.png" alt="" />Internet Explorera>li>
<li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa>li>
<li><a href="#"><img src="twitter_32.png" alt="" />Twittera>li>
<li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa>li>
ul>
<ul id="links">
<li class="icon"><img src="folder.png" alt="" />li>
<li><a href="#"><span>Documentsspan>a>li>
<li><a href="#"><span>Picturesspan>a>li>
<li><a href="#"><span>Musicspan>a>li>
<li><a href="#"><span>Computerspan>a>li>
<li><a href="#"><span>Networkspan>a>li>
<li><a href="#"><span>Connect tospan>a>li>
ul>
div>
win7的開始菜單有二個部分，左側程序菜單，右側系統菜單。
第二步：菜單容器css
#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
有幾個關注的點,可以留意下：
- -moz-border-radius:5px;-webkit-border-radius:5px;圓角效果，這是css3中應用最廣的
- box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;陰影效果
- background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));漸變背景
第三步：菜單左側部分的css
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
這里值得留意的是鼠標經過菜單項的效果設置，也就是#programs a:hover里的樣式，這是難點，也是css3的強大之處，依舊是圓角、陰影、漸變背景。
第四步：菜單右側的CSS部分
#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:5px; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:5px; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
要留意的點依舊是哪幾項，難點在于細節的微調，尤其是漸變背景的制作，css3中非常靈活，下次有機會，發篇css3漸變背景的詳細教程。
英文原文：http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx
]]>
這里有5個使用CSS3實現的常見效果，你可以馬上動手試試看。
1. CSS3按鈕
你可以創建一些大小、顏色不同的元素（如按鈕）,而不用每次都準備一個背景圖片。 ZURB上有教你創建CSS3按鈕的詳細文章，有興趣可以去看看。利用RGBA做出的陰影效果真的很棒！
2.CSS3柱形圖
Ben Lister選列了很多實用的CSS3技巧，包括這個看起來相當不錯 的3D柱形圖。使用-webkit-transform或-moz-transform以及指定的偏移，你可以用CSS做出和圖片一樣令人印象深 刻的效果。
3. CSS3下拉菜單
WebDesignerWall的Nick La展示了如何創建一個漂亮的CSS3彈出式下拉菜單，他展示了使用漸變圖片和CSS創建的兩個版本的菜單。
4. CSS3引用氣泡
這些由Nicolas Gallagher創建的純CSS引用氣泡看起來很棒，你可以稍加修改作為你網頁上的blockquote元素。
可以去Gallagher的demo頁面看看效果，尤其注意那個twitter的氣泡，比twitter官方使用嵌入的方法好。
5. CSS3相冊
蘋果剛剛推出了一些展示HTML5網頁效果的頁面（HTML5和CSS3往往被聯系在一起）。雖然這個使用CSS3創建的 Polaroid-style相冊有些過渡和3D效果無法在所有的瀏覽器中運行，不過這真的是一個很酷的CSS3過渡效果的示例。
想看更多CSS3和HTML5的demo，請點擊這里。
]]>
工欲善其事必先利其器。首先得先教教大家怎么用先進武器，要不然用“查看源文件&抓圖”的方法做一個Skin恐怕要一整天。
首先出場的是微軟的IEDevToolBar，這是一個免費的轉為Web開發人員制作的IE插件，做博客Skin時用到的主要功能有：
1.以樹結構查看CodeDom，并查看每個Element屬性，可以使用鼠標點擊選中Element，這個在我們制作Skin時很有用
2.生成圖片報表，就是將頁面上說有出現的圖片生成一份詳細的報表，這樣就省的我們自己去找圖片路徑和量圖片大小等等。
3.高亮顯示表格，表格單元，Div等的邊框，這個在我們調整布局時也是很有用
4.頁面尺子，可以然你任意在頁面上度量長度，這個是大大的提高了我們的工作效率，不用為了量個長度而抓圖再用畫圖工具量
現在就趕快下載裝上吧，就算你不做Skin，我也強烈推薦你裝上，Web項目調整界面時它真的是用處很多啊
下面出場的是ColorPic，這也是一個免費的軟件，用于拾取顏色的，鼠標移動到哪里就拾取哪里的顏色，可以對拾取的顏色分組，這樣我們就可以把需要的顏色都一次性拾取完，再慢慢的用了。拾取顏色和重新拾取時都是用Ctrl + G 快捷鍵，其它功能靠大家自己琢磨了。
最后就是編輯器了，如果你是CSS高手那文本編輯器就夠了，如果你是和我一樣的業余水平，我建議還是選一個可以智能提示的編輯器，比如Dreamweaver或者用Visual Studio2005/2003也是可以的。
工具搞定啦，開始來熱身吧，先講講博客園的CSS怎么自己定義，有些新來的朋友可能還不知道。
先進入你的博客的后臺管理，然后選擇“選項”頁，接下來選擇“Configure”項，現在看到“通過CSS定制頁面”項了吧，你可以再這個文本框里放自己的CSS，記得不用加<style>標簽。
不過我用的不是這種辦法，我是把自己的CSS加上<style>標簽放到“子標題”里，這是因為我原先用第一種辦法，好幾次遇到CSS效果突然顯示不出來，恢復到默認模板的樣式，我也不懂為啥這個得問DuDu哥啦，反正我用第二種方式就都不會再有這樣的問題了。
光有CSS還不夠，博客園的自定義CSS是于原模板有關系的，比如一些id和class的命名在各個模板中是不一樣的，所以針對某個模板制作出來的CSS型Skin一般是不能通用的。
接下來要講講博客園CSS定義習慣，一般模板上面會把頁面分成3大塊，一個是頂部標題，一個是菜單條（就是放文章分類和日歷，公告的那一條），一個是文章列表的主體。
這3個大塊一般有自己的id或者class，如果是id定義CSS的話就使用#id這樣的格式，比如：
#main
{
border:1px solid #FF0000;
width:100%;
}
如果是class那就是.class格式了，比如：
.main
{
border:1px solid #FF0000;
width:100%;
}
（對CSS還不甚了解的朋友快去補補吧，嘻嘻，其實偶對CSS也是一竅不通，都是瞎搞自己博客的外觀積累的一點點經驗
）每個模板都不一定用Class還是用ID，也不一定這3個大塊叫什么名字，我們如果用“查看源文件”那找起來可沒那么快了，現在就可以使用IEDevToolBar的View DOM功能了，View DOM提供了一個"Select Element by Click"功能，我們就可以使用鼠標選擇一個項，然后查看它的id了。
抓到id和class名了就開始定義自己的CSS吧。
首先需要把你的博客目前使用的模板的CSS文件下載下來，怎么下載？呵呵，“查看源代碼”大法咯，一眼就可以看到css文件了。
下載下來后就直接根據你的需要修改吧，不過要注意！不要刪除原先的定義，比如border原先是定義成1px solid #FF0000，你不想要border的話，不要直接刪除boder定義，而要把border重新定義成0px none #FFFFFF，要不然不能覆蓋模板的CSS定義。
呵呵，文章到此結束，你可以去自己定義自己的CSS了。(底下雞蛋，石頭亂飛)
嘻嘻，其實真的已經夠了，可能唯一不夠的就是你的配色眼光和對CSS的熟練程度了。像我這種業余水準的人怎么配色和設計布局呢，呵呵，一句話：天下配色一大抄。
我有時候路過好看的外國網站就用ColorPic去抓顏色然后配成自己的CSS，像我共享的幾個外觀都是從google的Blogger模板哪里抓取的配色，Blog布局一般都是那三大塊，很容易模仿過來的，有時候遇到ColorPic要抓連接的顏色時鼠標移動上去連接顏色變了，怎么辦。這時候就麻煩點抓圖，然后再抓圖上的顏色吧，人不可以太懶啦～～呵呵。
嘿嘿，本來要抓張我偷Blogger模板顏色的罪證～～～結果抓取的時候ColorPic看不到～～那就沒辦法了，大家自己回去試哈。
大家看完文章肯定都手癢了吧～～～祝大家DIY開心啦，做好了記得也發揚共享精神啊～～不共享也通知下，讓俺學習學習（保證不開ColorPic和DevToolBar），呵呵。
]]>
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
CSS 浮動
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，創建浮動框可以使文本圍繞圖像：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。
讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：
.news { background-color: gray; border: solid 1px black; }
.news img { float: left; }
.news p { float: right; }
<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。
.news { background-color: gray; border: solid 1px black; }
.news img { float: left; }
.news p { float: right; }
.clear { clear: both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>
這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news { background-color: gray; border: solid 1px black; float: left; }
.news img { float: left; }
.news p { float: right; }
<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。
事實上，W3School 站點上的所有頁面都采用了這種技術，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。
]]>
]]>