首頁 > 開發者 > JavaScript
高健壯性css---Float詳細，css---float
（一）關於float
首先我們瞭解到，CSS網頁布局的原理，就是按照HTML代碼中對象聲明的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術。.在HTML中的所有對象，預設分為兩種：塊元素(block element)、內嵌元素(inline element)，雖然也存在著可變元素，但只是隨上下文關係確定該元素是塊元素或者內嵌元素。
其實CSS的float屬性，作用就是改變塊元素(block element)對象的預設顯示方式。block對象設定了float屬性之後，它將不再獨自佔據一行。可以浮動到左側或右側。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣。
再請看，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，建立浮動框可以使文本圍繞映像：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。
clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文字區塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。
您可能編寫下面的代碼：
<html><head><title>test</title><style>.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }</style></head></html><div class="news"><img src="123.jpg" /><p>some text</p></div>
這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由於沒有現有的元素可以應用清理，所以我們只能添加一個空元素並且清理它。
.news { background-color: gray; border: solid 1px black; }.news img { float: right; }.news p { float: right; }.clear { clear: both; }<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>
這樣可以實現我們希望的效果，但是需要添加多餘的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news { background-color: gray; border: solid 1px black;float: left;}.news img { float: right; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為瞭解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是網站的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。
事實上，W3School 網站上的所有頁面都採用了這種技術，如果您開啟我們使用 CSS 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
（2）Css清除浮動的方法總結：
方法一：使用帶clear屬性的空元素
在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
<html><head><title>test</title><style>.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear{clear:both;}</style></head></html><div class="news"><img src="123.jpg" /><p>some text</p><div class = "clear"></div></div>
優點：簡單，代碼少，瀏覽器安全色性好。
缺點：需要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。
方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
<html><head><title>test</title><style>.news {background-color: gray;border: solid 1px black;overflow:hidden;*zoom:1;}.news img { float: left; }.news p { float: right; }</style></head></html><div class="news"><img src="123.jpg" /><p>some text</p></div>
方法三：給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。
方法四：使用鄰接元素處理
什麼都不做，給浮動元素後面的元素添加clear屬性。
<html><head><title>test</title><style>.news {background-color: gray;border: solid 1px black;overflow:hidden;*zoom:1;}.news img { float: left; }.news p { float: right; }.content{clear:both;}</style></head></html><div class="news"><img src="123.jpg" /><p>some text</p><div class = "content"></div></div>
方法五：使用CSS的:after虛擬元素
結合 :after 虛擬元素（注意這不是偽類，而是虛擬元素，代表一個元素之後最近的元素）和 IEhack ，可以完美相容當前主流的各大瀏覽器，這裡的 IEhack 指的是觸發 hasLayout。
給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after虛擬元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
<html><head><title>test</title><style>.news {background-color: gray;border: solid 1px black;overflow:hidden;*zoom:1;}.news img { float: left; }.news p { float: right; }.clearfix:after{content:"020";/*加空格*/display:block;height:0;clear:both;visibility:hidden;}.clearfix{zoom:1;/*觸發hasLayout*/}</style></head></html><div class="news clearfix"><img src="123.jpg" /><p>some text</p></div>
通過CSS虛擬元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。
（三）筆記小結
通過上面的例子，我們不難發現清除浮動的方法可以分成兩類：
一是利用 clear 屬性，包括在浮動元素末尾添加一個帶有 clear: both 屬性的空 div 來閉合元素，其實利用 :after 虛擬元素的方法也是在元素末尾添加一個內容為一個點並帶有 clear: both 屬性的元素實現的。
二是觸發浮動元素父元素的 BFC (Block Formatting Contexts, 塊級格式化上下文)，使到該父元素可以包含浮動元素，關於這一點。
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
