清除浮動(dòng)

結(jié)合多種清除浮動(dòng)的方式，總結(jié)起來(lái)即只要觸發(fā)BFC即可清除浮動(dòng)，可以觸發(fā)BFC的css樣式包括：

  • display: inline-block
  • display: table-cell
  • display: table-caption
  • float
  • overflow: hidden或auto

結(jié)合after和before~給出一種清除浮動(dòng)的方式：

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}

給before也加上content并且設(shè)置display: table是為了防止設(shè)置了清除浮動(dòng)的元素其margin-top和上一個(gè)元素的margin-bottom重合

要不要給before加這個(gè)設(shè)置應(yīng)視具體情況而定

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,801評(píng)論 1贊 92
  • 浮動(dòng)，從誕生那天起，它就是個(gè)特別的屬性——既為網(wǎng)頁(yè)布局帶來(lái)新的方法，卻又隨之產(chǎn)生一系列的問題。當(dāng)然，隨著時(shí)間的推移...
    郝特么冷閱讀 858評(píng)論 0贊 6
  • 1. 浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響? 特征：浮動(dòng)元素不在普通的文檔流中...
    在乎者也閱讀 1,205評(píng)論 0贊 1
  • 建議在PC端閱讀本文面向?qū)ο螅簩?duì)標(biāo)題中的概念基本不了解或僅僅聽說(shuō)過名字的人。如果已有一定了解請(qǐng)直接拉到最下看推薦閱...
    粉腸w閱讀 603評(píng)論 0贊 0
  • 文章版權(quán)歸饑人谷_Lyndon以及饑人谷所有。 1. 浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分...
    HungerLyndon閱讀 2,403評(píng)論 4贊 10