什麼是BFC？ CSS 如何使用僞元素清除浮動？

時間 2019-12-11

標籤什麼 bfc css 如何使用元素清除浮動欄目 CSS 简体版

原文原文鏈接

.BFC概念：html

　　塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。佈局

咱們先了解一個名詞：BFC（block formatting context），中文爲「塊級格式化上下文」。spa

先記住一個原則：若是一個元素具備BFC,那麼內部元素再怎麼翻江倒海，翻雲覆雨，都不會影響外面的元素。因此，BFC元素是不可能發生margin重疊的，由於margin重疊會影響外面的元素的；BFC元素也能夠用來清除浮動帶來的影響，由於若是不清除，子元素浮動則會形成父元素高度塌陷，必然會影響後面元素的佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。orm

如下狀況會觸發BFC:
•<html>根元素
•float的值不爲none
•overflow的值爲auto，scroll，hidden
•display的值爲table-cell，table-caption和inline--block中的任何一個
•position的值不爲relative和static 即 position: absolute/fixedhtm

顯然咱們在設置overflow值爲hidden時使container元素具備BFC，那麼子元素child浮動便不會帶來父元素的高度坍塌影響。blog

利用僞類元素清除浮動：it

.clearFix::after,.clearFix::before {

      display: block; 

      content: '';

      clear: both; 

      visibility: hidden;

      height: 0; 

}

.clearFix { zoom: 1;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。