浮動從何而來我們?yōu)楹我宄?清除浮動的原理是什么

2024-07-11 08:48:49

字體：大中小

供稿：網(wǎng)友

浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地布局；恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們?yōu)楹我宄樱壳宄拥脑硎鞘裁矗勘疚膶⒁徊揭徊降厣钊肫饰銎渲械膴W秘，讓浮動使用起來更加得心應(yīng)手。
一、清除浮動還是閉合浮動（Enclosing float or Clearing float）？
很多人都已經(jīng)習慣稱之為清除浮動，以前我也一直這么叫著，但是確切地來說是不準確的。我們應(yīng)該用嚴謹?shù)膽B(tài)度來對待代碼，也能更好地幫助我們理解開頭的三個問題。
1）清除浮動：清除對應(yīng)的單詞是 clear，對應(yīng)CSS中的屬性是 clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。
兩者的區(qū)別請看優(yōu)雅的 Demo
通過以上實例發(fā)現(xiàn)，其實我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設(shè)置clear：both清除浮動并不能解決warp高度塌陷的問題。
結(jié)論：用閉合浮動比清除浮動更加嚴謹，所以后文中統(tǒng)一稱之為：閉合浮動。
二、為何要清除浮動？
要解答這個問題，我們得先說說CSS中的定位機制：普通流，浮動，絕對定位（其中"position:fixed" 是 "position:absolute" 的一個子類）。
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標準里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標準里只有另一個詞，叫做普通流（normal flow)，或者稱之為常規(guī)流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流）這一詞，從來沒出現(xiàn)過document flow （文檔流）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內(nèi)聯(lián)框（通常是文本）的排列，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現(xiàn)包含框不會自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。
正是因為浮動的這種特性，導(dǎo)致本屬于普通流中的元素浮動之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現(xiàn)出正常的高度。
絕對定位就不多說了，不在本文討論范圍之內(nèi)，下回分解。
三、清除浮動的原理——了解 hasLayout 和 Block formatting contexts
先看一下清理浮動的各種方法：
1）添加額外標簽
這是在學(xué)校老師就告訴我們的一種方法，通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。

復(fù)制代碼

上一篇：CSS學(xué)習中的瓶頸期深入分析

下一篇：inline-block空隙之css letter-spacing與字體大小/字體關(guān)系數(shù)據(jù)表