什麽是文檔流？

將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文檔流，也稱為普通流。這個應該不難理解，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

CSS脫離文檔流&浮動