BFC

当元素的 display 值为 block、table-cell、table-caption、flex、inline-flex、grid 等值时,该元素就会生成一个块级格式化上下文(Block Formatting Context,BFC)。BFC 是 Web 页面中一个非常重要的渲染概念,在前端开发中应用广泛。开启BFC的区域,是一块独立的渲染区域。隔绝了内部与外部的联系,内部渲染不会影响外部,不同的BFC区域,渲染时页也互不干扰。

BFC 的作用是用于控制盒子内的布局及浮动元素的定位。BFC 可以防止元素被浮动元素覆盖,同时 BFC 也具有清除浮动的作用,常见的清除浮动方式就是通过给父元素生成 BFC。

一旦元素生成了 BFC,就会产生一系列的特性:

1、BFC 内部,每个元素的 margin box 的左边与包含块 border box 的左边相接触,即使存在浮动也是如此;

2、BFC 内部垂直方向的 margin 会发生折叠;

3、BFC 可以包含浮动元素,并且不会影响到外部元素的布局;

4、BFC 可以防止元素被浮动元素覆盖。

生成 BFC 的方式

一个元素如何生成 BFC 呢?下面列出几种生成 BFC 的方式:

1、float 值不为 none;

2、position 值为 absolute 或 fixed;

3、display 值为 inline-block、table-cell、table-caption、flex、inline-flex 等生成了新的块级盒子的值;

4、overflow 值不为 visible。

其中,最常见的方式就是给元素设置overflow: hidden或overflow: auto,如下代码:

.container {

  overflow: auto;

}

BFC 的应用场景

清除浮动

在前端开发中,经常会使用浮动来实现多列布局或者图片环绕文本等效果。但是,浮动元素脱离了文档流,使得父元素失去了高度,导致父元素内部的其它元素会产生重叠或者溢出的情况。而这个时候就可以给父元素生成 BFC 来解决这个问题,如下代码:

<div class="parent">

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

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

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

</div>

.parent {

  overflow: hidden;

}

.child {

  float: left;

}


避免 margin 重叠

当两个相邻的元素都设置了 margin-top 或 margin-bottom 属性时,会产生 margin 重叠的情况,从而使得页面显示异常。而如果包含这两个元素的父元素生成了 BFC,那么这个问题就可以被解决。通过给父元素添加overflow: hidden属性,就可以生成 BFC,从而避免 margin 重叠问题。

自适应布局

有些情况下,为了实现某个特殊的效果需要两个元素的高度相等,但是由于这两个元素是独立的,无法直接通过设置 height 来实现。这个时候,使用 BFC 就可以轻松实现自适应布局。具体来说,可以将两个元素都设为 float:left,然后给它们的父元素设置 overflow:hidden 来生成 BFC,这样两个元素就能够自适应布局,并且高度相等。

避免嵌套div回流

在页面中,经常会出现多层嵌套的 div 元素,如果每个 div 都根据内容自适应宽高,那么很容易就出现多次 reflow 的情况。而如果给包含这些 div 元素的外层元素生成 BFC,那么就可以避免这种情况的发生。

以下代码演示了 BFC 的一些特性:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>BFC Demo</title>

    <style>

      .container {

        width: 500px;

        background-color: lightblue;

        border: 1px solid #ccc;

        overflow: auto; /* 让 .container 生成 BFC */

      }

      .left {

        float: left;

        width: 100px;

        height: 200px;

        background-color: pink;

        margin-right: 20px;

      }

      .right {

        width: 300px;

        height: 300px;

        background-color: yellow;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="left"></div>

      <div class="right"></div>

    </div>

  </body>

</html>

在上面的代码中,.container元素设置了overflow: auto属性,生成了一个 BFC;.left元素设置了浮动,而.right元素没有设置任何位置属性。结果如下:

可以看到,由于.container生成了 BFC,所以.right元素不会被浮动的.left元素覆盖,而是自动向下进行了布局。同时,由于.container生成的 BFC 内部每个元素的 margin box 的左边与包含块 border box 的左边相接触,因此.left元素的右侧 margin 与.container的右边框重叠。

在实际开发中,常见的利用 BFC 清除浮动的方式有两种:

1、父元素设置overflow: auto或hidden属性;

2、父元素设置非static的 position 属性。

总结:BFC 是一个很重要的布局概念,在前端开发中应用广泛。通过生成 BFC 可以控制元素的布局,防止浮动元素覆盖,并且可以解决一些常见的布局问题。在实际开发中,常见的利用 BFC 清除浮动的方式有两种:父元素设置overflow: auto或hidden属性,并设置非static的 position 属性。

若有不对之处还希望指正为谢!@~@

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

推荐阅读更多精彩内容

  • BFC box,Formatting Context在解释 BFC 是什么之前,需要先介绍 Box、Formatt...
    詹亮的小仓库阅读 284评论 0 7
  • 欢迎访问我的博客https://qqqww.com/,祝所有码农同胞们早日走上人生巅峰,迎娶白富美~~ 1 前言 ...
    这里王工头阅读 227评论 0 0
  • BFC小结 前言 在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么...
    管鲍切思世所稀阅读 823评论 0 0
  • 水平有限,如果存在问题欢迎大家访问我的博客批评指正. 正文 首先,'FC'肯定不是开封菜,而是Formatting...
    DLLCNX阅读 379评论 0 0
  • 基本慨念 内容区域(content)是包含元素真实内容的区域。它通常包含背景、颜色或者图片等,位于内容边界的内部,...
    晴天的晴q阅读 2,154评论 0 0