div {
            height: 20px;
        }
        
        .container {
            position: absolute;  /* 創(chuàng)建一個BFC環(huán)境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

（2）外邊距折疊

特性的第二條：垂直方向上的距離由margin決定

在常規(guī)文檔流中，兩個兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個外邊距之和，而是以較大的為準(zhǔn)。

html：

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

這里我門可以看到，第一個子盒子有上邊距（不會發(fā)生margin穿透的問題）；兩個子盒子的垂直距離為20px而不是30px，因為垂直外邊距會折疊，間距以較大的為準(zhǔn)。

那么有沒有方法讓垂直外邊距不折疊呢？答案是：有。特性的第5條就說了：bfc就是頁面上的一個獨(dú)立容器，容器里面的子元素不會影響外面元素，同樣外面的元素不會影響到BFC內(nèi)的元素。所以就讓box1或box2再處于另一個BFC中就行了。

.container {
        overflow: hidden;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    .wrapper {
        overflow: hidden;
    }
    
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color: green;
    }
    
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: green;
    }

（3）不被浮動元素覆蓋

以常見的兩欄布局為例。

左邊固定寬度，右邊不設(shè)寬，因此右邊的寬度自適應(yīng)，隨瀏覽器窗口大小的變化而變化。

html：

 .column:nth-of-type(1) {
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: red;
        }
        
        .column:nth-of-type(2) {
            overflow: hidden;/*創(chuàng)建bfc */
            height: 300px;
            background-color: purple;
        }

還有三欄布局。

左右兩邊固定寬度，中間不設(shè)寬，因此中間的寬度自適應(yīng)，隨瀏覽器的大小變化而變化。

html：

.column:nth-of-type(1),
        .column:nth-of-type(2) {
            float: left;
            width: 100px;
            height: 300px;
            background-color: green;
        }
        
        .column:nth-of-type(2) {
            float: right;
        }
        
        .column:nth-of-type(3) {
            overflow: hidden;  /*創(chuàng)建bfc*/
            height: 300px;
            background-color: red;
        }

也可以用來防止字體環(huán)繞：

眾所周知，浮動的盒子會遮蓋下面的盒子，但是下面盒子里的文字是不會被遮蓋的，文字反而還會環(huán)繞浮動的盒子。這也是一個比較有趣的特性。

html：

 
    
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    

css：

（1）環(huán)繞

   .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;            /* overflow: hidden; */
        }

（2）利用bfc防止環(huán)繞

   .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;
            overflow: hidden;
        }

（4）BFC包含浮動的塊

這個是大家再熟悉不過的了，利用overflow:hidden清除浮動嘛，因為浮動的盒子無法撐出處于標(biāo)準(zhǔn)文檔流的父盒子的height。這個就不過多解釋了，相信大家都早已理解。

⑵ BFC可以包含浮動的元素(清除浮動)

浮動的元素會脫離普通文檔流，來看下下面一個例子:

由于容器內(nèi)元素浮動脫離文檔流，導(dǎo)致容器只剩下2px邊距高度，我們這時候可以采用BFC：

⑶ 可以阻止元素被浮動元素覆蓋

先看一個文字環(huán)繞效果:

我是一個左浮動的元素
我是一個沒有設(shè)置浮動, 
也沒有觸發(fā) BFC 元素, width: 200px; height:200px; background: #eee;

這時候其實(shí)第二個元素有部分被浮動元素所覆蓋，(但是文本信息不會被浮動元素所覆蓋) 如果想避免元素被覆蓋，可觸第二個元素的 BFC 特性，

在第二個元素中加入 overflow: hidden，就會變成：

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上是“css中bfc指的是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！