浮動原理和清除浮動
阿新 • • 發佈：2019-01-07
下面我先講一下浮動的原理：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文件中的普通流（文件流），即脫離了文件流，當一個元素浮動之後，不會影響到 塊級框的佈局而只會影響內聯框（通常是文字）的排列，文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際佈局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
再來看看w3c對浮動的一些基本定義：
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;
4）通過 content:"."生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，例如oocss裡面就有經典的 content:"XXXX",有些版本可能content 裡面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
這個方法利用了after偽類通過 content 在元素的後面生成了內容為一個點的塊級元素，優點是結構和語義化完全正確,程式碼量居中，缺點是複用方式不當會造成程式碼量增加。
再來看看w3c對浮動的一些基本定義：
浮動的缺陷在上面已經說了，主要是存在高度塌陷問題，接下來我就要講如何清除浮動 1.通過設定父元素 overflow 或者display：table或者為父元素也新增float 屬性來清除浮動，但這樣做會出現一系列其他的問題，所以我不推薦這樣做。 2.通過在浮動元素的末尾新增一個空元素，設定 clear：both屬性，after偽元素其實也是通過 content 在元素的後面生成了內容為一個點的塊級元素；具體看如下程式碼：定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
預設值： none 繼承性： no 版本： CSS1 JavaScript 語法： object .style.cssFloat="left"可能的值
值 描述 left 元素向左浮動。 right 元素向右浮動。 none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。 inherit 規定應該從父元素繼承 float 屬性的值。
-
<divstyle="clear:both;"></div>
- .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
- .clearfix { *zoom:1; } //為了適配ie6
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;
4）通過 content:"."生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，例如oocss裡面就有經典的 content:"XXXX",有些版本可能content 裡面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
這個方法利用了after偽類通過 content 在元素的後面生成了內容為一個點的塊級元素，優點是結構和語義化完全正確,程式碼量居中，缺點是複用方式不當會造成程式碼量增加。