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