站長資訊網在css中，可以使用float屬性，設置“float:left”或“float:right”樣式來進行元素浮動。一旦一個元素浮動了，將能夠并排，并且能夠設置寬高，無論它原來是塊級元素還是行內元素。
本教程操作環(huán)境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
浮動float的原本設計了作用初衷是為了實現文字環(huán)繞效果
浮動的語法：float:left/right;
使用了float:left或float:right或兩者都是會產生的浮動。
浮動的性質
浮動是css里面布局用的最多的屬性。
現在有兩個div，分別設置寬高。我們知道，它們的效果如下：
此時，如果給這兩個div增加一個浮動屬性，比如float: left;，效果如下：
這就達到了浮動的效果。此時，兩個元素并排了，并且兩個元素都能夠設置寬度、高度了（這在上一段的標準流中，不能實現）。
浮動想學好，一定要知道三個性質。接下來講一講。
性質1：浮動的元素脫標
脫標即脫離標準流。我們來看幾個例子。
證明1：
上圖中，在默認情況下，兩個div標簽是上下進行排列的?，F在由于float屬性讓上圖中的第一個<div>標簽出現了浮動，于是這個標簽在另外一個層面上進行排列。而第二個<div>還在自己的層面上遵從標準流進行排列。
證明2：
上圖中，span標簽在標準流中，是不能設置寬高的（因為是行內元素）。但是，一旦設置為浮動之后，即使不轉成塊級元素，也能夠設置寬高了。
所以能夠證明一件事：一旦一個元素浮動了，那么，將能夠并排了，并且能夠設置寬高了。無論它原來是個div還是個span。所有標簽，浮動之后，已經不區(qū)分行內、塊級了。
性質2：浮動的元素互相貼靠
我們來看一個例子就明白了。
我們給三個div均設置了float: left;屬性之后，然后設置寬高。當改變?yōu)g覽器窗口大小時，可以看到div的貼靠效果：
上圖顯示，3號如果有足夠空間，那么就會靠著2號。如果沒有足夠的空間，那么會靠著1號大哥。
如果沒有足夠的空間靠著1號大哥，3號自己去貼左墻。
不過3號自己去貼墻的時候，注意：
上圖顯示，3號貼左墻的時候，并不會往1號里面擠。
同樣，float還有一個屬性值是right，這個和屬性值left是對稱的。
性質3：浮動的元素有“字圍”效果
來看一張圖就明白了。我們讓div浮動，p不浮動。
上圖中，我們發(fā)現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。
總結：標準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）
關于浮動我們要強調一點，浮動這個東西，為避免混亂，我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。
性質4：收縮
收縮：一個浮動的元素，如果沒有設置width，那么將自動收縮為內容的寬度（這點非常像行內元素）。
舉例如下：
上圖中，div本身是塊級元素，如果不設置width，它會單獨霸占整行；但是，設置div浮動后，它會收縮
浮動的補充（做網站時注意）
上圖所示，將para1和para2設置為浮動，它們是div的兒子。此時para1+para2的寬度小于div的寬度。效果如上圖所示?？扇绻O置para1+para2的寬度大于div的寬度，我們會發(fā)現，para2掉下來了：
（學習視頻分享：css視頻教程）
布置一個作業(yè)
布置一個作業(yè)，要求實現下面的效果：
為實現上方效果，代碼如下：
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .header{ width: 970px; height: 103px; /*居中。這個語句的意思是：居中：*/ margin: 0 auto; } .header .logo{ float: left; width: 277px; height: 103px; background-color: red; } .header .language{ float: right; width: 137px; height: 49px; background-color: green; margin-bottom: 8px; } .header .nav{ float: right; width: 679px; height: 46px; background-color: green; } .content{ width: 970px; height: 435px; /*居中，這個語句今天沒講，你照抄，就是居中：*/ margin: 0 auto; margin-top: 10px; } .content .banner{ float: left; width: 310px; height: 435px; background-color: gold; margin-right: 10px; } .content .rightPart{ float: left; width: 650px; height: 435px; } .content .rightPart .main{ width: 650px; height: 400px; margin-bottom: 10px; } .content .rightPart .links{ width: 650px; height: 25px; background-color: blue; } .content .rightPart .main .news{ float: left; width: 450px; height: 400px; } .content .rightPart .main .hotpic{ float: left; width: 190px; height: 400px; background-color: purple; margin-left: 10px; } .content .rightPart .main .news .news1{ width: 450px; height: 240px; background-color: skyblue; margin-bottom: 10px; } .content .rightPart .main .news .news2{ width: 450px; height: 110px; background-color: skyblue; margin-bottom: 10px; } .content .rightPart .main .news .news3{ width: 450px; height: 30px; background-color: skyblue; } .footer{ width: 970px; height: 35px; background-color: pink; /*沒學，就是居中：*/ margin: 0 auto; margin-top: 10px; } </style> </head> <body> <!-- 頭部 --> <div> <div>logo</div> <div>語言選擇</div> <div>導航條</div> </div> <!-- 主要內容 --> <div> <div>大廣告</div> <div> <div> <div> <div></div> <div></div> <div></div> </div> <div></div> </div> <div></div> </div> </div> <!-- 頁尾 --> <div></div> </body> </html>
其實，這個頁面的布局是下面這個網站：
浮動的清除
這里所說的清除浮動，指的是清除浮動與浮動之間的影響。
前言
通過上面這個例子，我們發(fā)現，此例中的網頁就是通過浮動實現并排的。
比如說一個網頁有header、content、footer這三部分。就拿content部分來舉例，如果設置content的兒子為浮動，但是，這個兒子又是一個全新的標準流，于是兒子的兒子仍然在標準流里。
從學習浮動的第一天起，我們就要明白，浮動有開始，就要有清除。我們先來做個實驗。
下面這個例子，有兩個塊級元素div，div沒有任何屬性，每個div里有l(wèi)i，效果如下：
上面這個例子很簡單?？扇绻覀兘o里面的<li>標簽加浮動。效果卻成了下面這個樣子：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ } li{ float: left; width: 100px; height: 20px; background-color: pink; } </style> </head> <body> <div> <ul> <li>生命壹號1</li> <li>生命壹號2</li> <li>生命壹號3</li> <li>生命壹號4</li> </ul> </div> <div> <ul> <li>許嵩1</li> <li>許嵩2</li> <li>許嵩3</li> <li>許嵩4</li> </ul> </div> </body> </html>
效果如下：
上圖中，我們發(fā)現：第二組中的第1個li，去貼靠第一組中的最后一個li了（我們本以為這些li會分成兩排）。
這便引出我們要講的：清除浮動的第一種方式。
那該怎么解決呢？
方法1：給浮動元素的祖先元素加高度
造成前言中這個現象的根本原因是：li的父親div沒有設置高度，導致這兩個div的高度均為0px（我們可以通過網頁的審查元素進行查看）。div的高度為零，導致不能給自己浮動的孩子，撐起一個容器。
撐不起一個容器，導致自己的孩子沒辦法在自己的內部進行正確的浮動。
好，現在就算給這個div設置高度，可如果div自己的高度小于孩子的高度，也會出現不正常的現象：
給div設置一個正確的合適的高度（至少保證高度大于兒子的高度），就可以看到正確的現象：
總結：
如果一個元素要浮動，那么它的祖先元素一定要有高度。
有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）
只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。所以就是清除浮動帶來的影響了。
方法2：clear:both;
網頁制作中，高度height其實很少出現。為什么？因為能被內容撐高！也就是說，剛剛我們講解的方法1，工作中用得很少。
那么，能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？
這個時候，我們可以使用clear:both;這個屬性。如下：
clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。clear:both的意思就是：不允許左側和右側有浮動對象。
這種方法有一個非常大的、致命的問題，它所在的標簽，margin屬性失效了。讀者可以試試看。
margin失效的本質原因是：上圖中的box1和box2，高度為零。
方法3：隔墻法
上面這個例子中，為了防止第二個div貼靠到第二個div，我們可以在這兩個div中間用一個新的div隔開，然后給這個新的div設置clear: both;屬性；同時，既然這個新的div無法設置margin屬性，我們可以給它設置height，以達到margin的效果（曲線救國）。這便是隔墻法。
我們看看例子效果就知道了：
上圖這個例子就是隔墻法。
內墻法：
近些年，有演化出了“內墻法”：
上面這個圖非常重要，當作內墻法的公式，先記下來。
為了講內墻法，我們先記住一句重要的話：一個父親是不能被浮動的兒子撐出高度的。舉例如下：
（1）我們在一個div里放一個有寬高的p，效果如下：（很簡單）
（2）可如果在此基礎之上，給p設置浮動，卻發(fā)現父親div沒有高度了：
（3）此時，我么可以在div的里面放一個div（作為內墻），就可以讓父親div恢復高度：
于是，我們采用內墻法解決前言中的問題：
與外墻法相比，內墻法的優(yōu)勢（本質區(qū)別）在于：內墻法可以給它所在的家撐出寬度（讓box1有高）。即：box1的高度可以自適應內容。
而外墻法，雖然一道墻可以把兩個div隔開，但是這兩個div沒有高，也就是說，無法wrap_content。
清除浮動方法4：overflow:hidden;
我們可以使用如下屬性：
overflow:hidden;
overflow即“溢出”， hidden即“隱藏”。這個屬性的意思是“溢出隱藏”。顧名思義：所有溢出邊框的內容，都要隱藏掉。如下：
上圖顯示，overflow:hidden;的本意是清除溢出到盒子外面的文字。但是，前端開發(fā)工程師發(fā)現了，它能做偏方。如下：
一個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。這是一個偏方。
舉個例子：
那么對于前言中的例子，我們同樣可以使用這一屬性：
