清除浮動原理

在css中，我們有時會用到浮動屬性。

簡單來說，標準流文件中，塊元素會佔據整行來顯示，比如div，h標籤等。後面的標籤會依次往後。

但是用了浮動之後，就會脫離文件流，意味著後面的標籤可能會被擋住，引起布局混亂。因為浮動元素無法撐起父元素的高度（高度塌陷）。

那麼又想使用浮動屬性，又想讓後面元素按標準文件流布局應該怎麼辦呢？

此時，就需要使用清除浮動的方法。

清除浮動就是讓父元素高度恢復到正常狀態，浮動元素後面的元素能按正常文件流來繼續顯示。

清除浮動前：

清除浮動後：

清除浮動的方法也有很多。

1、浮動元素後面新增乙個空標籤。

不建議使用，因為會增加很多無意義標籤。與**語義化的原則相違背。

左浮動

右浮動我位於浮動元素後面

.float-left 

.float-right 
.clear-float

會出現這種非常規布局，謹慎使用。

3、after 偽類。最常用。

不用新增新標籤，給浮動元素的父元素新增。

布局：

左浮動

右浮動 我位於浮動元素後面

清除後：

.wrap::after

clear 屬性是不讓元素的周圍有浮動元素。屬性值可以為left、right、both、none、inherit。

clear 屬性只能作用在塊級元素上。因此要設定 display：block。clear：both，則讓清除兩側的浮動。

一般常寫的時候還會加上後面兩句：height：0；visibility：hidden；

這兩句和content的值有關，如果content有值而你不想顯示，則可以加上這兩句，如果content為空，則不加也可以。

如果你需要顯示content內容，則不可以加。

after before清除浮動原理

先來看一段 doctype html html lang en head meta charset utf 8 title document title style h1span pstyle head body div h1 我是h1 h1 span span div p 我是p p body h...

CSS清除浮動原理

每當我們需要使用float來設定元素的時候，因為float這個屬性自身不佔據空間的原因 下層塊級元素擠壓上層塊級元素，導致畫面無法顯示出來，因此需要清除浮動，而清除浮動有兩個方法 當設定完父元素height屬性以後，只需根據子元素的高度來對父元素進行變動 father此時父元素的高度為300，無論子...

css清除浮動的原理

最近學習css發現了高度塌陷時候要清除浮動,為了理解清楚浮動原理,網上找了不少資料,發現都寫的不是很清楚,而且都是一模一樣的內容,我在裡分享一下我對清楚浮動原理的理解,如果你已經很了解什麼是浮動和浮動的效果你可以直接跳轉到三.如何清除浮動 重點 閱讀 一.什麼是浮動 首先我們需要知道定位 元素在頁面...