什麼是BFC？

時間 2019-11-10

標籤什麼 bfc 简体版

原文原文鏈接

Block Formatting Contexts 即塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box（display 屬性爲 block, list-item, table 的元素）如何佈局，而且與這個區域外部絕不相干。其中 Formatting Context 是一個決定如何渲染文檔的容器，Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中還增長了GFC和FFC。

通俗點說，BFC就是一個獨立的盒子，而且與這個獨立盒子裏的佈局不受外部影響，固然它也不會影響到外面的元素。php

在文檔呈現開始的時候，會自動建立一個BFC來對整個頁面進行佈局，在沒有建立一個新的BFC的時候，整個文檔就這一個BFC。css

BFC的規則

內部的box會在垂直方向，從頂部開始一個接着一個地放置（上面的例子能夠看出）html
同一個BFC中，在兩個相鄰的塊級元素中，垂直margin會發生摺疊佈局
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)，即便存在浮動也是如此flex
BFC的區域不會與float box重疊code
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然orm
計算BFC的高度時，浮動元素也參與計算htm

觸發BFC

根元素文檔
float屬性不爲none（如：left | right）string
overflow的值不爲visible（如：hidden | auto | scroll）
display屬性值爲inline-block | flex | inline-flex | table-cell | table-caption
position爲absolute或fixed

應用BFC

解決margin疊加問題

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　</head>
<body>
　　<style type="text/css">
.　　　　overflow{
　　　　　　overflow: hidden;
　　　　}
　　　　.div-one{
　　　　　　margin-bottom:20px;
　　　　　　background: red;
　　　　}
　　　　.div-two{
　　　　　　margin-top:10px;
　　　　　　background: blue;
　　　　}
　　</style>
　　　　<div class="overflow">
　　　　　　<div class="div-one">
　　　　　　　　abc
　　　　　　</div>
　　　　</div>
　　　　<div class="overflow">
　　　　　　<div class="div-two">
　　　　　　　　def
　　　　</div>
　　</div>
</body>
</html>

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

清除內部浮動

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>BFC清除內部浮動</title>

　　　　<style type="text/css">

　　　　　　.child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;}

　　　　　　.parent {width: 300px; border: 1px solid #95E1D3;float:left;}

　　　　　　/*.parent或者不用float:left;用overflow：hidden;*/

　　　　</style>

　　</head>

　　<body>

　　　　<div class="parent">

　　　　　　<div class="child">11</div>

　　　　　　<div class="child">22</div>

　　　　</div>

　　</body>

</html>

3.一個浮動，一個不浮動：

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>
　　　　<div style="width: 400px; border: 1px solid #95E1D3;">
　　　　　　<div style="background-color: blue; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;">11</div>
　　　　　　<div style="background-color: red; border: 1px solid #FCE38A; width: 200px; height: 100px;overflow: hidden;">22</div>

</div>
　　</body>
</html>

僅供參考。

相關標籤/搜索

每日一句

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