方法一:定高法
強行給父元素新增乙個高度
弊端:後期不好維護
方法二:額外標籤法
在浮動元素最後面新增乙個塊級元素
給這個塊級元素新增乙個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...