假如一個頁面上有3個div塊，如下排列：
圖1：不使用浮動
圖2：向右浮動
圖2說明了框1脫離了文檔流向右移動，直到它的右邊緣碰到包含框的右邊緣為止。
圖3：向左浮動
圖3說明了框1向左浮動，脫離文檔流向左移動，直到它的左邊緣碰到框2的左邊緣為止，由於框1脫離了文檔流，不佔據空間，框2處於文字資料流中，所以框1覆蓋了框2。
上面3個圖說明了，浮動既可以向左也可以向右，直到它的外邊緣碰到包含框或者另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
下面用代碼實現一下：
<!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=utf-8" /><title>體驗CSS</title><style type="text/css"> <!--/*上一行避免老式瀏覽器不支援CSS*/body{padding:0px;margin:0px;background-color:#FFFF99;}#title{font-size:19px;font-weight:bold;text-align:center;padding:15px;background-color:#FFFFCC;border:1px solid #FFFF00;}#content{padding:6px;font-size:13px;line-height:130%;/*行間距*/}img{float:left;/*圖文混排*/filter:alpha(opacity=100,finishopacity=0,style=2);/*漸層效果*/}</style></head> <body><div id="title">CSS簡介</div><div id="content"><img src="file:///F|/02 B—S階段/9.1精通CSS.DIV網頁樣式與布局/書中執行個體/第1章/bike.jpg" border="0" />CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。CSS是1996年由W3C審核通過，並且推薦使用的。簡單的說CSS的引入就是為了使得HTML能夠更好的適應頁面的美工設計。它以HTML為基礎，提供了豐富的格式化功能，如字型、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設定不同的樣式風格，包括顯示器、印表機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</div></body></html>
效果如下：
這個例子是圖文混排，把圖片設定為左浮動。
清除浮動（clear）是float的一個屬性。
文法：
clear : none | left | right | both
取值：
none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
例子：
<!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=utf-8" /><title>css清除浮動</title><style> .float{ float:left; width:200px; height:100px; background:#6E6E6E;} .clear{ clear:left; float:left; width:200px; height:100px; background:#999999;} </style></head> <body> <div class="float">這是一個浮動元素</div> <div class="clear">這是一個清除浮動屬性的元素</div></body></html>
效果：
三、CSS浮動總結
浮動能使得塊級標籤排在同一行，但由於浮動脫離了文檔位置，因為假如浮動層有一個不浮動的父親層，父親層是包不住浮動層的，就得清除浮動。關於CSS浮動本篇文章只是簡單介紹了一下，還有更多的內容等待著去挖掘。
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
