四種方式進行清除浮動

以下展示了四種方式進行清除浮動

css

.box 

.fl 

div>
div>
div>
div>
下面是結果
因為沒有清除浮動，所以子元素沒有將父元素撐開，出現上面的情況。

下面是幾種清除浮動的方法
1.額外標籤法

css
.box 

.fl 
.clearfix 

div>
div>
div>
div>
div>
效果展示
2.使用after偽元素清除浮動

.clearfix:after
.clearfix 

.clearfix:after,.clearfix:before

.clearfix:after
.clearfix

css

.box 

.fl 
.clearfix 

div>
div>
div>
div>
將clearfix作為全域性使用的類名, 這樣在專案各處使用清除浮動就大大方便啦~~~~

清除浮動的四種方式

方法一 定高法 強行給父元素新增乙個高度 弊端 後期不好維護 方法二 額外標籤法 在浮動元素最後面新增乙個塊級元素 給這個塊級元素新增乙個clear both就可以解決這個問題 弊端 每一次清除浮動都需要新增乙個額外標籤 father son div clear both div div 方法三 偽...

清除浮動的四種方式

父元素不寫高度時，子元素寫了浮動之後，父元素會發生高度塌陷 示例 html left浮動 right浮動 css box box l,box r box l box r 效果 給父級盒子設定高度，缺點 前提需要能確定內容高度才能設定 css box box l,box r box l box r 效...

清除浮動的四種方式及其原理

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。父元素的高度無法被撐開，影響與父元素同級的元素 與浮動元素同級的非浮動元素會跟隨其後 若非第乙個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構 clearfix style class f left d...