談對BFC佈局的理解

阿新 • • 發佈：2019-01-19

BFC（Block formatting context）：塊級格式上下文，是一個獨立的渲染區域，與區域外部毫不相干。
BFC佈局規則：
- 內部的Box會在垂直方向，一個接一個地放置；
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊；
- 每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此；
- BFC的區域不會與float box重疊；
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

- 計算BFC的高度時，浮動元素也參與計算。

以上是之前在瞭解BFC時看的部落格裡的介紹
個人覺得講的很好，可以有空學習一下。
以下是自己的理解（就是想做個筆記，按自己的理解來）：

情況一：兩個塊有重合情況：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自適應兩欄佈局</title>
    <style>
        * {
            margin: 0 
;
            padding: 0;
        }
        .wall {
            width: 300px;
            position: relative;
        }

        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background-color: lightpink;
        }

        .main {
            height: 200px 
;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="wall">
    <div class="aside"></div>
    <div class="main"></div>
</div>
</body>
</html>

頁面效果：
這裡寫圖片描述

使用BFC解決：

// 給main新增overflow：
.main {
    overflow: hidden;       
    /* 可以通過觸發main生成BFC，來實現自適應兩欄佈局 */
    /* 根據BFC佈局規則第三條：每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此 */
    /* 根據BFC佈局規則第四條：BFC的區域不會與float box重疊 */
}

頁面效果：
這裡寫圖片描述

情況二：給子元素設定浮動，父元素沒有高度：
這應該是剛接觸浮動很容易遇見的一個問題：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清楚內部浮動</title>
    <style>
        .par {
            border: 5px solid lightpink;
            width: 300px;
        }

        .child {
            border: 5px solid lightblue;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

頁面效果：
這裡寫圖片描述

由於給子元素設定浮動，子元素會脫離文件流，父元素不會因為子元素而撐開，因此父元素沒有高度。
使用 BFC解決：

// 給父元素par新增overflow
.par {
    overflow: hidden;
    /* 根據BFC佈局規則第六條：計算BFC的高度時，浮動元素也參與計算 */
    /* 為達到清楚內部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與其中 */
}

頁面效果：
這裡寫圖片描述

3.情況三：margin重疊問題
當給同在一個BFC的兩個子元素都設定margin時，垂直部分的margin會重疊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止垂直margin重疊</title>
    <style>
        p {
            color: dodgerblue;
            background: lightpink;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 100px;
        }
    </style>
</head>
<body>
<p>塊一</p>
<p>塊二</p>
</body>
</html>

頁面效果：
這裡寫圖片描述
（兩個塊垂直距離100px）

使用BFC解決：
給其中一個子元素再包一個div，形成一個BFC區域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止垂直margin重疊</title>
    <style>
        .wrap {
            overflow: hidden;
        }
        p {
            color: dodgerblue;
            background: lightpink;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 100px;
        }
    </style>
</head>
<body>
<p>塊一</p>
<!-- 根據BFC佈局規則第二條：box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊 -->
<!-- 可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個p便不屬於同一個BFC，就不會發生margin重疊了 -->
<div class="wrap">
    <p>塊二</p>
</div>
</body>
</html>

頁面效果：
這裡寫圖片描述
（兩個塊垂直距離200px）

總結：

BFC是一個與外界隔離的獨立區域，給它的子元素設定樣式不受外界干擾，遇到塊間重疊，覆蓋等問題一般都可以用BFC解決。

PS：overflow：hidden可以解決這些問題的原因，請看連結：overflow:hidden

談對BFC佈局的理解

BFC（Block formatting context）：塊級格式上下文，是一個獨立的渲染區域，與區域外部毫不相干。 BFC佈局規則： - 內部的Box會在垂直方向，一個接一個地放置； - Box垂直方向的距離由margin決定。屬

淺談對xmpp的理解及應用

mpp 通信 new xmpp times div log 傳輸數據重新參考原文鏈接 http://blog.sina.com.cn/s/blog_69f68f880102uyeg.html 一、xmpp是基於xml的協議。具有遵循標準，有安全性，使用TCP傳的xml的

淺談對NaN的理解

def 淺談 nan 理解個數字 sna efi 數字 color 1.NaN : Not a Number 不是一個數字 2.NaN 與其他數值進行比較的結果總是不相等的，包括它自身在內 3.判斷是否是NaN，方法一：is.NaN(變量)；

web前端技術基礎課程講解之淺談對soket的理解

淺談對soket的理解定義：網路上的兩個程式通過一個雙向的通訊鏈實現資料的交換，這個連結的一端就成為Socket 它是程序通訊的一種，即呼叫這個網路庫的api函式實現分佈在不同主機相關程序之間的資料交換，依照tcp/ip協議分給每個主機的網路地址，如果兩個主機要進行通訊，任何一個程序都要首先知道對方

解讀google C++ code style談對C++的理解

C++是一門足夠複雜的語言.說它"足夠複雜",是因為C++提供了足夠多程式設計正規化--泛型, 模板, 面向物件, 異常,等等.順便說說,我已經很久沒有跟進C++的最新發展了(比如C++0x), 所以前面列舉出來的特性應該只是C++所有特性的一個部分罷了.C++特性過多很難駕馭好C++的原因之一.

淺談對this的理解

"this" 是個關鍵詞，是個存放指標的變數。前提是在js中，別的語言我更不清楚了： 1、 this 預設指向是 window e.g var name ='mongo'; console.log(this.name) // mon

談一談對Activity的理解

一、Activity的生命週期 Activity的基本生命週期如下程式碼所示： public class MyActivity extends Activity { protected void onCreate(Bundle savedI

淺談對handle的理解

handler是Android中重要的訊息機制，我們在平常的開發中也是經常接觸到的，下面是我個人總結的一些觀點和理解，希望和大家分享一起討論。首先呢，Handler的主要工作是採用當前執行緒的Loo

淺談對Spring的理解

Spring框架是一個為Java應用程式的開發提供了綜合、廣泛的基礎性支援的Java平臺。 Spring是一個十分龐大的體系，具

對BFC規範(塊級格式化上下文：k block g formatting context) 的理解

splay spl 容器 for pla 方式 lock 不同 con （W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決

淺談對後綴自動機的一點理解

字符串變化 post .... 初始 mar 一起樹狀子集後綴自動機入門詳解及模板

淺談對二分思想的理解

搜索問題 turn class 中一不能運算 color arch 因此 1、什麽是二分思想？二分思想可以理解為是一種將一個大問題分成兩個子題，當每次分析完兩個子問題後，舍棄其中一個不符合條件的子問題，再將符合條件的子問題一分為二，反復循環搜索判斷的操作，直至找到所求

淺談對js閉包的理解

閉包就是能夠讀取其他函式內部變數的函式。由於在javascript中，只有函式內部的子函式才能讀取區域性變數，所以閉包可以理解成“定義在一個函式內部的函式“。在本質上，閉包是將函式內部和函式外部連線起來的橋樑。（引用了自由變數的函式） function f1(){ var a=10;

淺談對Js面向物件的理解（1）

面向物件的語言有一個標誌，那就是它們都有類的概念，通過類來建立任意多個具有相同屬性和方法的物件。它是一種程式開發的方法，它將物件作為程式的基本單元，將邏輯和資料封裝其中，以提高程式碼的靈活性、重用性和擴充套件性。物件是把資料及對資料的操作方法放在一起，作為一個相互依存的整體。簡單的

web前端開發技術之淺談對HTML5 智能表單的理解

提示 goods 表單加載完成空格日期和時間 url 顯示指向 Html5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。 <FORM id=xinzeng> … </FO

簡談對虛擬Dom的理解

簡單說一下我自己對虛擬DOM的理解。。。。由於 jquery+es6模板字串（渲染dom）=》真實的渲染效能巨差所以為了提高效能虛擬DOM就是把真實的DOM轉成JS 物件樹虛擬DOM建立以後

淺談對IdentityServer4 access_token 的理解

IDS4伺服器通過JWT簽名(我覺得是私鑰簽名)生成access_token ，JWT包含了 1.header 用於描述元資訊，例如產生 signature 的演算法： { "typ": "JWT", "alg": "HS256" } 其中alg關鍵字就指定了使用哪一種雜湊

簡談自己對redux的理解

redux描述首先redux 有3大組成部分 1.store2. action .3reducer 還有邊外的 components，如何觸發action 呢？首先的拿到store物件,store物件是通過 redu

簡談對Java的abstract和interface的理解

Java通過Abstract與Interface來實現對抽象概念的定義1。這兩者強化了Java面向物件的特點。Abstract與Interface對抽象概念的支援很相似，但是區別亦比較顯著。 class A extends B implements C,D,E;2

淺談對Spring IOC容器的理解

看過很多關於Ioc容器的文章，自我理解。首先，Ioc即“控制反轉”，是一種設計思想。 1、在Java開發中，Ioc意味著將你設計好的物件交給容器控制，而不是傳統的在你的物件內部直接控制。 2、傳統Java SE程式設計，我們直接在物件內部通過new進行建立物件，是程式

談對BFC佈局的理解

總結：

相關推薦