理解CSS-BFC(Block-Formatting-Context)概念

前言

BFC 已经是一个耳听熟闻的词语了,但是我对于BFC的概念以及应用场景一直都不是很明白,据说搞懂BFC可以让我们理解CSS中某些原本诡异的地方。今天着重去了解了一下,做了以下总结。

一、文档流

在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。而普通流其实就是指BFC中的FC。

FC(Formatting Context),直译过来就是“格式化上下文”,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC(块级格式化上下文)IFC(行级格式化上下文)、****GFC(网格布局格式化上下文)FFC(自适应格式化上下文)。本文着重介绍BFC,其余的就不在这里深入展开了

二、文档流的定位方案

【1】常规流(Normal flow)

  • 在常规流中,盒一个接着一个排列;
  • 在块级格式化上下文里面, 它们竖着排列;
  • 在行内格式化上下文里面, 它们横着排列;
  • 当position为static或relative,并且float为none时会触发常规流;
  • 对于静态定位(static positioning),position: static,盒的位置是常规流布局里的位置;
  • 对于相对定位(relative positioning),position: relative,盒偏移位置由top、bottom、left、right属性定义。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。

【2】浮动(Floats)

  • 左浮动元素尽量靠左、靠上,右浮动同理
  • 这导致常规流环绕在它的周边,除非设置 clear 属性
  • 浮动元素不会影响块级元素的布局
  • 但浮动元素会影响行内元素的布局,让其围绕在自己周围,撑大父级元素,从而间接影响块级元素布局
  • 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
  • 不超过它的包含块,除非元素本身已经比包含块更宽
  • 行内元素出现在左浮动元素的右边和右浮动元素的左边,左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

【3】绝对定位(Absolute positioning)

  • 绝对定位方案,盒从常规流中被移除,不影响常规流的布局;
  • 它的定位相对于它的包含块,相关CSS属性:top、bottom、left、right;
  • 如果元素的属性position为absolute或fixed,它是绝对定位元素;
  • 对于position: absolute,元素定位将相对于上级元素中最近的一个relative、fixed、absolute,如果没有则相对于body;

二、BFC是什么?

MDN上的解释:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

BFC(Block Formatting Context)直译为“块级格式化上下文”,是用于布局块级盒子的一块渲染区域。它规定了内部的块级如何布局,并且与这个区域外部毫不相干。简单的概括为:所谓的BFC就是CSS布局的一个概念,是一块区域,一个环境。

三、BFC触发方式

上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

【1】根元素,即HTML元素

【2】浮动元素:float值为leftright

【3】overflow值不为 visible,为 autoscrollhidden

【4】display的值为inline-block、table-cell、table-caption、tableinline-tableflexinline-flexgridinline-grid

【5】position的值为absolute或fixed

四、浏览器对BFC的约束规则

【1】内部的Box会在垂直方向上一个接一个的放置

【2】垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)

【3】每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)

【4】BFC的区域不会与float的元素区域重叠

【5】计算BFC的高度时,浮动子元素也参与计算

【6】BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

五、 BFC在布局中的应用

BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。我们可以利用BFC的这个特性来做很多事。

【1】防止margin重叠(塌陷)

根据BFC布局规则第【2】条:垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)两个p元素之间的距离应该为(50+50)px,发生了margin重叠后,两个p之间的距离为50px

解决:我们可以在其中一个p外面包裹一层容器,并触发该容器生成一个新BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。

<style>
  p {
    color: rgba(21, 22, 22, 0.972);
    background: rgb(231, 105, 2);
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 50px;
    font-weight: bold;
  }
</style>

<body>
  <p>Hello</p>
  <p>Hi</p>
</body>
<style>
  .wrap {
    /* 新的BFC */
    overflow: hidden;   
  }
</style>

【2】清除内部浮动

根据BFC布局规则第【5】条:计算BFC的高度时,浮动子元素也参与计算。parent内部元素浮动了,因此div的高度就坍塌了,要解决坍塌,就得清除浮动。

解决:为达到清除内部浮动,我们可以触发parent生成BFC,那么parent在计算高度时,parent内部的浮动元素child也会参与计算。

<style>
  .parent {
    border: 5px solid rgb(231, 105, 2);
    width: 300px;
  }
  .child {
    border: 5px solid rgba(95, 179, 235, 0.972);
    width: 100px;
    height: 100px;
    float: left;
  }
</style>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>
<style>
  .parent {
    border: 5px solid rgb(231, 105, 2);
    width: 300px;
    /* 新的BFC */
    overflow: hidden;
  }
</style>

【3】自适应多栏布局

根据BFC布局规则第【3】条:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使浮动元素也是如此。  因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

解决:我们可以通过通过给main设置overflow:hidden来触发main生成BFC, 当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。从而实现自适应两栏布局。

<style>
  body {
    width: 400px;
    position: relative;
  }
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: rgb(48, 44, 44);
  }
  .main {
    height: 200px;
    background: rgb(194, 189, 189);
  }
</style>

<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>
<style>
  .main {
    /* 新的BFC */
    overflow: hidden;
    height: 200px;
    background: rgb(194, 189, 189);
  }
</style>

【4】用于布局

圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染。详情链接:圣杯布局&&双飞翼布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
  #container {
    padding-left: 200px;
    padding-right: 150px;
    overflow: hidden;
  }
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    right: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-right: -150px;
    background: rgb(231, 105, 2);
  }
</style>
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>
</html>

参考:

  1. CSS深入理解流体特性和BFC特性下多栏自适应布局
  2. 史上最全面、最透彻的BFC原理剖析​​​​​​​
  3. 深入理解BFC
  4. Understanding Block Formatting Contexts in CSS
  5. BFC 神奇背后的原理
  6. BFC 初体验​​​​​​​

文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339