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