CSS脫離文件流浮動

什麼是文件流？

將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文件流，也稱為普通流。這個應該不難理解，html中全部元素都是盒模型，盒模型占用一定的空間，依次排放在html中，形成了文件流。

什麼是脫離文件流？

元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態（可以理解為漂浮在文件流的上方，處在另乙個平面）。脫離文件流的元素的定位基於正常的文件流，當乙個元素脫離文件流後，依然在文件流中的其他元素將忽略該元素並填補其原先的空間。

脫離文件流的幾個方法

絕對定位(absolute)

絕對定位是相對於該元素的父類（及以上，如果直系父類元素不滿足條件則繼續向上查詢）元素進行定位的，並且這個父類元素的position必須是非static（也就是設定了position屬性）定位的。

固定定位(fixed)

完全脫離文件流，相對於瀏覽器視窗進行定位（相對於瀏覽器視窗就是相對於html）。

浮動(float)

浮動就是使元素漂浮在父級元素的左邊或右邊的方法

注意：使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在該元素的周圍。

浮動產生的負面效果

背景不能顯示

由於浮動產生，如果對父級設定了背景顏色或背景，而父級不能被撐開(這是浮動的乙個很重要的結果)，所以導致背景不能顯示。

邊框不能被撐開

如果父級設定了邊框(border)屬性，由於子級裡使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。

margin padding設定值不能正確顯示

由於浮動導致父級子級之間設定了padding、margin屬性的值不能正確表達(本質還是設定後父級沒有被撐開的緣故)，注意這裡不能正確表達是指達不到想要的效果，實際上padding和margin還是起作用的

4.文字環繞效果（姑且算負面效果）

如果給換乙個元素設定浮動，那麼其他盒子會無視這個元素，但其他盒子內的文字還是會為這個元素讓出位置，形成文字環繞效果

清除浮動的方法

1 對父級標籤設定適合的高度

一般來說，而我們不會給父級標籤設定高度，是因為我們想通過內容來自動調整（自適應高度），但是設定浮動後，父級標籤不再具有自適應高度的能力，因此我們可以手動設定父級標籤的高度

使用clear: both清除浮動

在父級標籤中加入class=「clear"，讓後設定.clear

3. 給父級標籤設定overflow: hidden 對父級css選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少css**即可解決浮動產生。

為什麼加入overflow:hidden即可清除浮動呢？那是因為overflow:hidden屬性相當於是讓父級緊貼內容，這樣即可緊貼其物件內內容（包括使用float的div盒子），從而實現了清除浮動。

CSS脫離文件流 浮動