CSS 小結筆記之BFC_ZenDei技術網路在線

CSS 小結筆記之BFC

-Advertisement-

BFC 即為Block formatting context 的縮寫，BFC 主要用來將一個盒子設置為一個隔離的容器，不管盒子內部的元素具有什麼屬性，都不會影響到盒子的外面。 1、哪些元素能產生BFC 不是所有的元素都能產生BFC的，只有display 屬性為 block, list-item, t ...

BFC 即為Block formatting context 的縮寫，BFC 主要用來將一個盒子設置為一個隔離的容器，不管盒子內部的元素具有什麼屬性，都不會影響到盒子的外面。

1、哪些元素能產生BFC

不是所有的元素都能產生BFC的，只有display 屬性為 block, list-item, table 的元素，才可以產生BFC。

這點其實根據BFC的主要作用應該可以很形象的理解。“必須表現為一塊一塊的，才能給出一個隔離的空間“。

2、觸發BFC的具體條件

光有BFC的潛質，不代表就直接會觸發BFC。觸發BFC 需要至少滿足下列條件中的一條：

（1）、具有浮動（即float不為none）

（2）、具有絕對定位或固定定位（position：absolute |fixed）

（3）、display為inline-block, table-cell, table-caption, flex, inline-flex

（4）、overflow不為visible（一般設置overflow：hidden）

3、BFC盒子的特性

（1）、BFC內部的盒子是從上到下一個接著一個排列的（正常的塊級元素排列也是如此）

（2）、BFC內部的盒子之間的距離是通過margin值來設置的，相鄰的兩個盒子的margin會重疊

（3）、BFC盒子內部的子盒子是緊貼著BFC盒子的邊緣的（從左到右排列，則子盒子的左邊緣緊貼著BFC的左邊框（不與邊框重疊）；從右到左排列，則子盒子的右邊緣緊貼著BFC盒子的右邊框）

（4）、BFC盒子不會與浮動的盒子產生重疊，而是緊靠著浮動的邊緣

（5）、計算BFC的高度時，也會自動計算浮動或定位的盒子的高度

4、BFC的具體應用

（1）、清除元素內部的浮動（特性（5）的應用）

正常情況下當父盒子不給出高度時，子盒子的高度會將把父盒子自動撐開來，讓父盒子具有高度。

而如果子元素都具有浮動時，父盒子就不會被撐開。這時使父盒子具有BFC屬性即可同時計算浮動盒子的高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .fa div {
            width: 100px;
            height: 100px;
            float: left;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .fa .son2 {
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>

View Code

在父盒子沒有觸發BFC時，顯示的結果如下

而通過2中的方法，給.fa 添加BFC （例如增加一句overflow: hidden;）效果如下

（2）、解決外邊距合併的問題（特性（2）的應用）

根據上述的3-（2）所說，BFC內部的相鄰的兩個盒子的margin值會重疊，那麼如果不屬於同一個BFC則可以解決這個問題

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">

        <div class="son1"></div>

        <div class="son2"></div>
    </div>
</body>

</html>

View Code

同一個BFC下，.son1的下邊距為50px .son2的上邊距為100px 按照我們一般想要的結果是，.son1 與.son2 之間的距離為150px；

而實際效果入下：

可以很明顯看出，他們之間的距離只有100px，他們的margin重疊了。

如果給.son1 外邊在嵌套一個BFC 則 .son1 與.son2，不屬於同一個BFC就不會產生這個情況結果如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .bfc {
            overflow: hidden;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="bfc">
            <div class="son1"></div>
        </div>
        <div class="son2"></div>
    </div>
</body>

</html>

View Code

（3）、使右側盒子寬度自適應（特性（4）的應用）

一個父盒子內部有兩個子盒子，如果第一個子盒子有浮動，而第二個子盒子沒有浮動，則第一個子盒子會蓋在第二個盒子上面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 400px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .son1 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
            float: left;
        }
        .son2 {
            height: 200px;
           
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">

        <div class="son1"></div>

        <div class="son2">這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字這裡有一大段文字</div>
    </div>
</body>

</html>

View Code

如果給第二個子盒子（.son2{overflow:hidden}）添加BFC，則第二個盒子會緊貼著浮動盒子的右側，並且由於第二個子盒子沒有寬度，所以他的寬度會自適應剩餘大小。

最後，一般設置BFC最常用的就是給盒子加上 overflow: hidden; 因為這樣的寫法基本上不會對原有的其他樣式產生影響。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

cc.Component

組件入口函數1: onLoad: 組件載入的時候調用, 保證了你可以獲取到場景中的其他節點，以及節點關聯的資源數據;2: start: 也就是第一次執行 update 之前觸發;3: update(dt):組件每次刷新的時候調用,距離上一次刷新的時間(會在所有畫面更新前執行);4: lateUpda ...
關於iframe中使用fixed定位的一些問題

先來看看position: fixed；的定義：生成絕對定位的元素，相對於瀏覽器視窗進行定位；但是在iframe中使用fixed定位，實際上是相對於iframe視窗進行定位，原因在於iframe類似於創建了一個瀏覽器視窗，在使用一些獲取滑鼠位置以及元素位置等方法的時候把iframe當作瀏覽器視窗來 ...
HTML5開篇定義（更新中）

以下介紹的兩種屬性是為後面的屬性支持左鋪墊，大概一看就OK了。事件屬性 ...
JaveScript之CSS變數

大概是CSS3吧,出了一個叫CSS變數的東西，也叫自定義屬性，還是比較有用的東東，可以用JavaScript靈活控制，變數作用我們來實現一個div跟隨滑鼠滾動的小東西用來說明如何自定義變數 HTML代碼如下： JavaScript代碼，我們來寫一段監聽，處理變數值這樣就實現了我們想要的效果，當然 ...
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課

3d建築,3d消防,消防演習模擬,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房,bim管理系統 ...
腳手架vue-cli系列五：基於Nightwatch的端到端測試環境

不同公司和組織之間的測試效率迥異。在這個富交互和響應式處理隨處可見的時代，很多組織都使用敏捷的方式來開發應用，因此測試自動化也成為軟體項目的必備部分。測試自動化意味著使用軟體工具來反覆運行項目中的測試，併為回歸測試提供反饋。端到端測試又簡稱E2E（End-To-End test）測試，它不同於單元 ...
兩年移動端前端開發問題吐血彙總

某些手機上 fixed 元素在頁面滾動時會消失，某些 IOS 設備上觸發不了點擊事件，IOS 設備上點擊事件有 300ms 延遲，IOS 設備上 fixed 元素在鍵盤彈起時位置會變幻不定，在彈窗上滑動時底部頁面也跟著動，兩年移動端前端開發，我TM都經歷了什麼 ...
node.js 之 N-blog

N-blog 使用 Express + MongoDB 搭建多人博客原文地址： https://github.com/nswbmw/N-blog 建議初學者，研究下整個項目。這裡節選了一些內容為筆記： nrm 是一個管理 npm 源的工具。用來切換官方 npm 源和國內的 npm 源（如: c ...