簡介BFC

時間 2019-11-11

標籤簡介 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 和 IFC, CSS3 中還增長了 GFC 和 FFC。佈局

BFC 定義

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

BFC佈局規則：

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

2、觸發BFC（方法不少，適應於不一樣的場景）spa

根元素就是一個BFC；
float屬性不爲none，通常是left（在咱們這種閱讀順序下）；
position爲absolute或fixed；
display爲inline-block, table-cell, table-caption, flex, inline-flex；
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)

1. BFC簡介
2. BFC簡單介紹
3. BFC 簡述
4. BFC簡析
5. CSS BFC和IE Haslayout介紹
6. BFC 的簡單理解
7. css佈局的各類FC簡單介紹：BFC，IFC，GFC，FFC
8. 什麼是BFC？對bfc的簡單理解
9. BFC
10. bfc
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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