資源描述：
《CSS中的float+clear詳解》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。
1、float什么是CSSFloat？float是css的定位屬性。在傳統(tǒng)的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。在網(wǎng)頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動的元素仍然是網(wǎng)頁流的一部分。這與使用絕對定位的頁面元素相比是一個明顯的不同。絕對定位的頁面元素被從網(wǎng)頁流里面移除了，就像印刷布局里面的文本框被設置為無視頁面環(huán)繞一樣。絕對定位的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。像這樣在一個元素上用CSS設置浮動：以下是代碼片段：#sidebar?{?floa
2、t:?right;?}fload屬性有四個可用的值：Left和Right分別浮動元素到各自的方向，None(默認的)使元素不浮動，Inherit將會從父級元素獲取float值。Float的用處除了簡單的在圖片周圍包圍文字，浮動可用于創(chuàng)建全部網(wǎng)頁布局。Float對小型的布局同樣有用。例如頁面中的這個小區(qū)域。如果我們在我們的小頭像圖片上使用Float，當調整圖片大小的時候，盒子里面的文字也將自動調整位置：同樣的布局可以通過在外容器使用相對定位，然后在頭像上使用絕對定位來實現(xiàn)。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。清除Float清
3、除(clear)是浮動(float)的相關屬性.一個設置了清除Float的元素不會如浮動所設置的一樣，向上移動到Float元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。上例中，側欄向右浮動，并且短于主內容區(qū)域。頁腳(footer)于是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁腳(footer)上清除浮動，以使頁腳(footer)待在浮動元素的下面。以下是代碼片段：#footer?{?clear:?both;?}清除(clear)也有4個可能值。最常用的是both，清楚左右兩邊的浮動。left和right只能清楚一個方向的浮動。none是
4、默認值，只在需要移除已指定的清除值時用到。inherit應該時第五個值，不過很奇怪的是IE不支持(這個不奇怪吧，IE從來都這么特立獨行吧－糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。偉大的塌陷使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問題。塌陷的直觀對立面更不好，看看下面的情況：當上面的塊級元素自動擴展以適應浮動元素時，段落間的文本流中會出現(xiàn)非自然的空白換行，而且沒有有效
5、的方法來修正這個問題。對于這種情況，設計師的抱怨會更甚于對塌陷的抱怨（沒理解，不是設計完成之后才會進行頁面編碼嗎？－糖伴西紅柿）。為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之后，容器結束之前來清除浮動。清除浮動的技術如果你很明確的知道接下來的元素會是什么，可以使用clear:both;來清除浮動。這個方法很不錯，它不需要hack，不添加額外的元素也使得它有良好的語義性。當然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。·空div方法從字面來看，是一個空的div。。有時可能會用或者一些其他元素，但是
6、div是最常用的，因為它沒有瀏覽器默認樣式；沒有特殊功能，而且一般不會被css樣式化。這個方法因為只是為了表現(xiàn)，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個方法有效而且沒有任何傷害?！verflow方法在父元素上設置overflow這個css屬性。如果父元素的這個屬性設置為auto或者hidden，父元素就會擴展以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。但是，如果需要增加一個新的div來使用這個方法，其實就和空div方法一樣沒有語義了。而且要記住，overflow屬性不是為了清除浮動而定義的。要小心不要覆
7、蓋住內容或者觸發(fā)了不需要的滾動條?！ず唵吻宄椒ㄊ褂昧艘粋€聰明的css偽選擇符(:after)來清除浮動。比起在父元素上設置overflow，只需要給它增加一個額外的類似于”clearfix”的類。這個類使用如下css:·.clearfix:after{·content:".";·visibility:hidden;·display:block;·height:0;·clear:both;}這會在清除浮動的父元素之后應用一點看不見的內容。這不是全部內容，還需要一些額外的代碼來適應那些老舊的瀏覽器。不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網(wǎng)格為例。
8、為了從視覺上較好的把相似
