div布局中float詳解

《div布局中float詳解》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、CSS浮動(dòng)屬性Float詳解原文地址：冰羽博客什么是CSSFloat？float是css的定位屬性。在傳統(tǒng)的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱(chēng)為“文本環(huán)繞”。在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)用了CSS的float屬性的頁(yè)面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動(dòng)的元素仍然是網(wǎng)頁(yè)流的一部分。這與使用絕對(duì)定位的頁(yè)面元素相比是一個(gè)明顯的不同。絕對(duì)定位的頁(yè)面元素被從網(wǎng)頁(yè)流里面移除了，就像印刷布局里面的文本框被設(shè)置為無(wú)視頁(yè)面環(huán)繞一樣。絕對(duì)定位的元素不會(huì)影響其它元素，其它元素也不會(huì)影響它，無(wú)論它是否和其它元素挨著。像這樣在一個(gè)元素上用CSS設(shè)置浮動(dòng)

2、：#sidebar{float：right;}fload屬性有四個(gè)可用的值：Left和Right分別浮動(dòng)元素到各自的方向，None（默認(rèn)的）使元素不浮動(dòng)，Inherit將會(huì)從父級(jí)元素獲取float值。Float的用處除了簡(jiǎn)單的在圖片周?chē)鼑淖郑?dòng)可用于創(chuàng)建全部網(wǎng)頁(yè)布局。Float對(duì)小型的布局同樣有用。例如頁(yè)面中的這個(gè)小區(qū)域。如果我們?cè)谖覀兊男☆^像圖片上使用Float，當(dāng)調(diào)整圖片大小的時(shí)候，盒子里面的文字也將自動(dòng)調(diào)整位置：同樣的布局可以通過(guò)在外容器使用相對(duì)定位，然后在頭像上使用絕對(duì)定位來(lái)實(shí)現(xiàn)。這種方式中，文本不會(huì)受頭像圖片大小的影響，不會(huì)隨頭像圖片

3、的大小而有相應(yīng)變化。清除Float清除（clear）是浮動(dòng)（float）的相關(guān)屬性。一個(gè)設(shè)置了清除Float的元素不會(huì)如浮動(dòng)所設(shè)置的一樣，向上移動(dòng)到Float元素的邊界，而是會(huì)忽視浮動(dòng)向下移動(dòng)。如下，一圖頂千言。上例中，側(cè)欄向右浮動(dòng)，并且短于主內(nèi)容區(qū)域。頁(yè)腳（footer）于是按浮動(dòng)所要求的向上跳到了可能的空間。要解決這個(gè)問(wèn)題，可以在頁(yè)腳（footer）上清除浮動(dòng)，以使頁(yè)腳（footer）待在浮動(dòng)元素的下面。#footer{clear：both;}清除（clear）也有4個(gè)可能值。最常用的是both，清楚左右兩邊的浮動(dòng)。left和right只能清楚一

4、個(gè)方向的浮動(dòng)。none是默認(rèn)值，只在需要移除已指定的清除值時(shí)用到。inherit應(yīng)該時(shí)第五個(gè)值，不過(guò)很奇怪的是IE不支持（這個(gè)不奇怪吧，IE從來(lái)都這么特立獨(dú)行吧－糖伴西紅柿注）。只清除左邊或右邊的浮動(dòng)，實(shí)際中很少見(jiàn)，不過(guò)絕對(duì)有他們的用處。偉大的塌陷使用浮動(dòng)（float）的一個(gè)比較疑惑的事情是他們?cè)趺从绊懓麄兊母冈氐?。如果父元素只包含浮?dòng)元素，那么它的高度就會(huì)塌縮為零。如果父元素不包含任何的可見(jiàn)背景，這個(gè)問(wèn)題會(huì)很難被注意到，但是這是一個(gè)很重要的問(wèn)題。塌陷的直觀對(duì)立面更不好，看看下面的情況：當(dāng)上面的塊級(jí)元素自動(dòng)擴(kuò)展以適應(yīng)浮動(dòng)元素時(shí)，段落間的文本流中

5、會(huì)出現(xiàn)非自然的空白換行，而且沒(méi)有有效的方法來(lái)修正這個(gè)問(wèn)題。對(duì)于這種情況，設(shè)計(jì)師的抱怨會(huì)更甚于對(duì)塌陷的抱怨（沒(méi)理解，不是設(shè)計(jì)完成之后才會(huì)進(jìn)行頁(yè)面編碼嗎？－糖伴西紅柿）。為了防止怪異的布局和跨瀏覽器的問(wèn)題，塌陷問(wèn)題幾乎總是被要處理的。我們?cè)谌萜髦械母?dòng)元素之后，容器結(jié)束之前來(lái)清除浮動(dòng)。清除浮動(dòng)的技術(shù)如果你很明確的知道接下來(lái)的元素會(huì)是什么，可以使用clear:both;來(lái)清除浮動(dòng)。這個(gè)方法很不錯(cuò)，它不需要hack，不添加額外的元素也使得它有良好的語(yǔ)義性。當(dāng)然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個(gè)清除浮動(dòng)的工具。空div方法從字面來(lái)看，是一個(gè)空

6、的div。。有時(shí)可能會(huì)用或者一些其他元素，但是div是最常用的，因?yàn)樗鼪](méi)有瀏覽器默認(rèn)樣式；沒(méi)有特殊功能，而且一般不會(huì)被css樣式化。這個(gè)方法因?yàn)橹皇菫榱吮憩F(xiàn)，對(duì)頁(yè)面沒(méi)有上下文涵義而被純語(yǔ)義論者嘲笑。誠(chéng)然，從嚴(yán)格的角度來(lái)說(shuō)他們是對(duì)的，但是這個(gè)方法有效而且沒(méi)有任何傷害。overflow方法在父元素上設(shè)置overflow這個(gè)css屬性。如果父元素的這個(gè)屬性設(shè)置為auto或者h(yuǎn)idden，父元素就會(huì)擴(kuò)展以包含浮動(dòng)。這個(gè)方法有著較好的語(yǔ)義性，因?yàn)樗恍枰~外元素。但是，如果需要增加一個(gè)新的div來(lái)使用這個(gè)方法，其實(shí)就和空div方法一樣沒(méi)有語(yǔ)義了。而且要記住，o

7、verflow屬性不是為了清除浮動(dòng)而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。簡(jiǎn)單清除方法使用了一個(gè)聰明的css偽選擇符（：after）來(lái)清除浮動(dòng)。比起在父元素上設(shè)置overflow，只需要給它增加一個(gè)額外的類(lèi)似于”clearfix”的類(lèi)。這個(gè)類(lèi)使用如下css：.clearfix:after{content：“。”;visibility：hidden;display：block;height：0;clear：both;}這會(huì)在清除浮動(dòng)的父元素之后應(yīng)用一點(diǎn)看不見(jiàn)的內(nèi)容。這不是全部?jī)?nèi)容，還需要一些額外的代碼來(lái)適應(yīng)那些老舊的瀏覽器。不同的情況需

8、要不同的浮動(dòng)清除方法。以一個(gè)具有不同樣式塊的網(wǎng)格為例。為了從視覺(jué)上較好的把相似的塊聯(lián)系起來(lái)，需要在必要的地方