css浮動清除

2021-10-21 10:03:49 字數 1271 閱讀 9153

普通流（標準流）、浮動和定位

漂浮在普通流的上面

（1）浮動元素會脫離標準流

（2）float屬性會改變元素display屬性,設定浮動屬性，可以讓 div 水平排列，並且沒有間隙

兩個div的顯示：

設定inline-block: 可以水平顯示，不過 div 之間有間隙

設定浮動屬性，可以讓 div 水平排列，並且沒有間隙

浮動只會影響當前的或者是後面的標準流盒子，不會影響前面的標準流。

父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後

父級盒子高度為0，就影響了下面的標準流盒子。

主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。

（1）額外標籤法（空標籤法）

在浮動元素末尾新增乙個空的標籤例如

缺點： 新增許多無意義的標籤，結構化較差。

(2)給父級新增： overflow屬性

overflow為:hidden| auto| scroll;
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。

(3)after偽元素

.clearfix:after 


.clearfix
缺點：由於ie6-7不支援:after，相容性問題

(4)雙偽元素

.clearfix:before,.clearfix:after  .


clearfix:after  .


clearfix
缺點：由於ie6-7不支援:after，相容性問題

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...

CSS清除浮動 清除float浮動

一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...