Web前端知識點-認識浮動及清除浮動帶來影響的簡單方法

本文從一個簡單的HTML頁面入手，對為什么要有浮動，如何設(shè)置浮動，元素設(shè)置浮動后自身的變化及對整個布局產(chǎn)生的影響，以及如何消除浮動帶來的影響都做了詳細的過程解析，理解浮動對頁面布局來說很重要，希望本文能有所幫助！

一、認識浮動

普通標準文檔流中，瀏覽器從HTML文件的最上面開始，從上至下，從左至右，逐個顯示每個元素，每個元素在HTML文檔中的位置就限制了他在頁面中的位置。

先看一個簡單的HTML

以上HTML由三大部分組成：div#header、div#main、div#footer，其中div#main又由兩小部分組成：div#content和div#sidebar

瀏覽器從上到下依次渲染，如下

上面就是標準的文檔流，各個元素在頁面中的位置和順序由元素在HTML中的位置和順序決定

如果想形成豐富的頁面效果，讓元素能夠按照我們指定的位置擺放，就需要用到浮動屬性float了，讓元素"浮"起來，"動"起來。

比如這里想讓div#main中的子元素div#sidebar以側(cè)邊欄的形式顯示在div#main的右側(cè)，并和div#content左右分離，以兩欄顯示。

接下來，我們一步一步解析如何實現(xiàn)：

浮動就是指將元素脫離文檔流向左或向右布局，使用float屬性來設(shè)置，有三個取值：none（不浮動）、left（向左浮動）、right（向右浮動）

這里對div#sidebar設(shè)置float屬性，取值right，加載如下

前后對比，有兩個明顯的不同

一是div#sidebar原來是占滿整個瀏覽器寬度的，浮動之后，寬度自動變成內(nèi)容的寬度；

二是元素設(shè)置浮動之后，會脫離標準流，浮在頁面上，后面的元素div#footer上移，父元素div#main高度收縮，如果父元素中只有div#sidebar這一個元素，設(shè)置浮動之后父元素塌陷情況會更嚴重

這里需要注意的一點是，由于div#sidebar元素在div#container的后面，雖然設(shè)置了浮動，瀏覽器也是從上到下依次解析，先解析div#content，后解析div#sidebar，將它從標準流刪除，浮動到div#content下方的最右側(cè)。所以這里要實現(xiàn)兩邊欄的效果，需要先對調(diào)div#sidebar和div#content在HTML中的位置，此時再加載

我們看到div#sidebar如預(yù)期的那樣出現(xiàn)在了div#content的右邊，但是由于脫離標準流浮動在頁面上，div#main和div#footer右邊的部分區(qū)域被浮在上面的元素蓋住了，雖然div#container中的內(nèi)容碰到浮動元素的邊緣就會換行，自動繞流，但是背景色和背景圖片還是會被蓋住，整個頁面結(jié)構(gòu)不夠清晰。

我們期望的效果是：

1、視覺上div#sidebar好像包含在父盒子中，整個父盒子高度能自適應(yīng)。div#sidebar和div#footer上下分離，不能發(fā)生重合

2、視覺上div#content和div#sidebar在div#main中左右分離

為了達到以上效果，就需要清除浮動帶來的影響

二、清除浮動帶來的影響

浮動引起的主要問題之一是元素設(shè)置浮動之后，脫離標準流，不再占用原來的空間，導致父元素塌陷。所以可以直接為父元素設(shè)置一個高度，視覺上看起來包裹所有的子元素，包括已脫離標準流的浮動元素。

方法一：給父元素設(shè)置一個高度

分析：在知道子元素高度的前提下，設(shè)置高度能直接的達到目的。但如果父元素中的子元素個數(shù)不固定，高度不固定呢？如果指定一個高度，父元素的高度就不能隨著子元素個數(shù)和高度的變化而變化了，限制了整個自適應(yīng)布局。

要想清除浮動帶來的影響，又不破壞父元素的高度自適應(yīng)，就需要借助一個新屬性clear。

方法二：使用clear屬性

clear屬性用于設(shè)置元素哪一側(cè)不允許有浮動元素，有四種取值

具體實現(xiàn)：

在父元素div#main的所有子元素的后面添加一個專門用來清除浮動的子元素div.clear，并設(shè)置div.clear的clear屬性為right（因為此處只需要清除右側(cè)的浮動）

因為div.clear的作用只是用來清除浮動，所以內(nèi)容為""空，另外本案例為了觀察更明確，給所有div設(shè)置了邊框，這里設(shè)置div.clear的border-width為0px，覆蓋原來的border屬性。

代碼做修改后，看一下效果

現(xiàn)在div#footer和div#sidebar上下成功分離，div#sidebar和div#content好像也撐起了盒子（本質(zhì)上div#sidebar還是浮動在頁面上的），但是div#content和div#sidebar還是沒有做到左右視覺上的分離，因為div#content為了實現(xiàn)自適應(yīng)布局，此處沒有指定寬度，默認占據(jù)整個父元素的寬度，而div#sidebar是脫離標準流的，自然會重合。

這里可通過設(shè)置div#content的margin-right屬性來巧妙的實現(xiàn)左右視覺上分離。

具體實現(xiàn)：

先為div#sidebar指定一個width，這里設(shè)置為120px，再設(shè)置div#content的margin-right為150px，目的就是為了通過div#content的右外邊距控制和div#sidebar之間的距離，外邊距只要大于浮動元素的寬度即可。效果如下

為了驗證實現(xiàn)自適應(yīng)布局的效果，我們手動改變?yōu)g覽器的寬度，如下

以上通過浮動屬性，clear屬性及margin屬性的綜合運用，把一個自上而下的標準流的布局變成了頁面布局更清晰的分欄布局，同時也是自適應(yīng)的頁面布局，隨著瀏覽器的伸縮不會破壞整個布局。

修改后的完整代碼

當然清除浮動還有別的方式，這里暫時先做以上討論。

注：以上布局主要是為了說明浮動的"浮"和"動"特性,其他方面先不做考慮。如有疏漏之處，歡迎指正，我們一起成長快樂。

軟件開發(fā)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。