簡介BFC

1、BFC是什麼?css

在解釋 BFC 是什麼以前,須要先介紹 Box、Formatting Context的概念。html

Box: CSS佈局的基本單位

  Box 是 CSS 佈局的對象和基本單位, 直觀點來講,就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性,決定了這個 Box 的類型。 不一樣類型的 Box, 會參與不一樣的 Formatting Context(一個決定如何渲染文檔的容器),所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子:css3

  • block-level box:display 屬性爲 block, list-item, table 的元素,會生成 block-level box。而且參與 block fomatting context;
  • inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素,會生成 inline-level box。而且參與 inline formatting context;
  • run-in box: css3 中才有, 這兒先不講了。

Formatting context

  Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域,而且有一套渲染規則,它決定了其子元素將如何定位,以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ide

  CSS2.1 中只有 BFC 和 IFCCSS3 中還增長了 GFC 和 FFC。佈局

BFC 定義

  BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,而且與這個區域外部絕不相干。flex

BFC佈局規則:

  1. 內部的Box會在垂直方向,一個接一個地放置。(不用解釋)
  2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  3. 每一個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,不然相反)。即便存在浮動也是如此。
  4. BFC的區域不會與float box重疊。
  5. BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。(下面幾個例子都能體現到這一點)
  6. 計算BFC的高度時,浮動元素也參與計算    

2、觸發BFC(方法不少,適應於不一樣的場景)spa

  1. 根元素就是一個BFC;
  2. float屬性不爲none,通常是left(在咱們這種閱讀順序下);
  3. position爲absolute或fixed;
  4. display爲inline-block, table-cell, table-caption, flex, inline-flex;
  5. overflow不爲visible;

3、應用3d

一、清楚浮動(第6條規則)code

<style type="text/css">
.father{
    border: 2px solid green;
}
.son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
}
</style>
<body>
<div class="father">
    <div class="son"></div>
    <div class="son"></div>
</div>
顯而易見,子元素的浮動致使父元素坍塌!以下圖:

<style type="text/css">
.father{
    border: 2px solid green;
    overflow: hidden; //觸發父元素的BFC清除浮動;
}
.son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
}
</style>
<body>
<div class="father">
    <div class="son"></div>
    <div class="son"></div>
</div>

 

二、自適應兩欄佈局(第三、4條規則)orm

<style type="text/css">
.aside{
    width: 100px;
    height: 150px;
    float: left;
    background-color: green;
}
.main{
    height: 200px;
    background-color: red;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
第3條。

<style type="text/css">
.aside{
    width: 100px;
    height: 150px;
    float: left;
    background-color: green;
}
.main{
    overflow: hidden;//第4條 也很明顯的體現了第5條
    height: 200px;
    background-color: red;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>

3、防止margin垂直合併(第2條)

<style type="text/css">
.box{
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 100px;
}
</style>
<body>
<div class="box"></div> 
<div class="box"></div>
//同一個BFC內垂直margin重疊

<style type="text/css">
.box{
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 100px;
}
.wraper{
    overflow: hidden;
}
</style>
<body>
<div class="box"></div>
<div class="wraper">     //給下面的box添加一個wraper並觸發其BFC,如今兩個BFC互不影響。
    <div class="box"></div>
</div>

注:(引自jizhula.com)

相關文章
相關標籤/搜索