清除浮動的四種方式

方法一:定高法

強行給父元素新增乙個高度

弊端:後期不好維護

方法二:額外標籤法

在浮動元素最後面新增乙個塊級元素

給這個塊級元素新增乙個clear:both就可以解決這個問題

弊端:每一次清除浮動都需要新增乙個額外標籤

="father"

>
="son"
>
<
/div>
"clear: both"
>
<
/div>
<
/div>

//固定用法: 只需要給浮動元素的父級新增clearfix即可

.clearfix:
:after 
/* 為了相容ie6,7 */
.clearfix 
//或者
.clearfix:before,
.clearfix:after 
.clearfix:after 
/* 為了相容ie6,7 */
.clearfix

優點: 簡單

缺點: 在特定的場景下使用不了

清除浮動的四種方式

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

四種方式進行清除浮動

以下展示了四種方式進行清除浮動先看一段 css box fl html div div div div 下面是結果因為沒有清除浮動，所以子元素沒有將父元素撐開，出現上面的情況。下面是幾種清除浮動的方法1.額外標籤法 css box fl clearfix html div div div div d...

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

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