CSS脫離文檔流&浮動

什麼是文檔流？

將窗體從上至下分紅一行一行，並在每行中按從左至右依次排放元素，稱爲文檔流，也稱爲普通流。這個應該不難理解，HTML中所有元素都是盒模型，盒模型佔用必定的空間，依次排放在HTML中，造成了文檔流。

 

什麼是脫離文檔流？

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

 

脫離文檔流的幾個方法

1. 絕對定位(absolute)

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

2. 固定定位(fixed)

徹底脫離文檔流，相對於瀏覽器窗口進行定位（相對於瀏覽器窗口就是相對於html）。

3. 浮動(float)

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

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

 

浮動產生的負面效果

1. 背景不能顯示

因爲浮動產生，若是對父級設置了背景顏色或背景圖片，而父級不能被撐開(這是浮動的一個很重要的結果)，因此致使背景不能顯示。

2. 邊框不能被撐開

若是父級設置了邊框(border)屬性，因爲子級裏使用了float屬性，產生浮動，父級不能被撐開，致使邊框不能隨內容而被撐開。

3. margin padding設置值不能正確顯示

因爲浮動致使父級子級之間設置了padding、margin屬性的值不能正確表達(本質仍是設置後父級沒有被撐開的緣故)，注意這裏不能正確表達是指達不到想要的效果，實際上padding和margin仍是起做用的

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

若是給換一個元素設置浮動，那麼其餘盒子會無視這個元素，但其餘盒子內的文本仍是會爲這個元素讓出位置，造成文字環繞效果

 

 

清除浮動的方法

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

通常來講，而咱們不會給父級標籤設置高度，是由於咱們想經過內容來自動調整（自適應高度），可是設置浮動後，父級標籤再也不具備自適應高度的能力，所以咱們能夠手動設置父級標籤的高度

2. 使用clear: both清除浮動

 在父級標籤中加入class=「clear"，讓後設置.clear{ clear:both} 

<style> .clear { clear:"both"     } </style> <div class="clear"></div>

3. 給父級標籤設置overflow: hidden

對父級CSS選擇器加overflow:hidden樣式，能夠清除父級內使用float產生浮動。優勢是能夠不多CSS代碼便可解決浮動產生。

爲何加入overflow:hidden便可清除浮動呢？那是由於overflow:hidden屬性至關因而讓父級緊貼內容，這樣便可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。

 

參考地址：https://blog.csdn.net/qq_42204313/article/details/82682261