清除浮動的各種方法

2021-08-15 14:24:59 字數 899 閱讀 4359

網頁開發寫css時常見的就是浮動,那浮動的定義是什麼呢,乙個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。也就是說

浮動會脫離文件流,盡量向左或向右移動,後面的元素會隨文件流補上。

浮動可以實現多個塊級元素分布在一行的布局,既像內聯元素一樣呈現出來,又可以設定寬高;

由於浮動會使元素脫離文件,所以其父元素高度為0,也就是高度坍塌。

//css

.parent

.child

.clear

//html

在包含浮動子元素的父元素上使用 :after 選擇器生成內容清除浮動。

//css

.parent

.child

.clearfix:after

.clearfix/*相容ie*/

//html

方法四:利用overflow: hidden

這種方法使得父元素包裹住子元素,解決了高度坍塌問題,但是溢位的內容會被隱藏。

//css

.parent

.child

//html

方法五:浮動父元素

給父元素增加 float屬性,而不用去清除子元素的浮動。但是產生了新的浮動,對後面元素會有影響。

方法六:設定父元素display: table

直接改變了盒模型的屬性,可能產生未知問題。

css清除浮動各種方法

1,在浮動元素後面增加 標籤 標籤有自帶的清除浮動屬性 2,在浮動元素後面增加乙個清除浮動層 3,給浮動元素新增overflow auto樣式 4,為最後浮動元素設定如下樣式 清理浮動 clearfix after clearfix 其原理是,在 高階 瀏覽器中使用 after 偽類在浮動塊後面加上...

css清除浮動各種方法

css清除浮動各種方法 1,在浮動元素後面增加 標籤 標籤有自帶的清除浮動屬性 2,在浮動元素後面增加乙個清除浮動層 3,給浮動元素新增overflow auto樣式 4,為最後浮動元素設定如下樣式 清理浮動 clearfix after clearfix 父類中引用clearfix 其原理是,在 ...

css清除浮動各種方法

css清除浮動各種方法 1,在浮動元素後面增加 標籤 標籤有自帶的清除浮動屬性 2,在浮動元素後面增加乙個清除浮動層 3,給浮動元素新增overflow auto樣式 4,為最後浮動元素設定如下樣式 清理浮動 clearfix after clearfix 其原理是,在 高階 瀏覽器中使用 afte...