[深入]BFC--Block Formatting Context

最新推荐文章于 2023-03-31 12:31:19 发布
最新推荐文章于 2023-03-31 12:31:19 发布
阅读量87 收藏
点赞数
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41389092/article/details/110877191
版权

全称：Block Formatting Context(块级格式化上下文)

里面有一些概念：

1. Block Container

里面有BFC的盒

那么有哪些盒属于Block Container呢？

  • block
  • inline-block
  • table-cell
  • table-caption（表格标题）
  • flex item (父元素被设为display:flex，子元素如果没有其他的设置，就是Block Container, 下同)
  • grid cell

2. Block-level Box

外面有BFC

  • block
  • flex
  • table
  • grid

3. Block box

里外都有BFC

Block box = Block-level Box + Block Container

4. 什么属性会产生BFC

定义
  • The root element of the document (<html>).
  • Floats (elements where float isn’t none).
  • Absolutely positioned elements (elements where position is absolute or fixed).
  • Inline-blocks (elements with display: inline-block).
  • Table cells (elements with display: table-cell, which is the default for HTML table cells).
  • Table captions (elements with display: table-caption, which is the default for HTML table captions).
  • Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
  • Block elements where overflow has a value other than visible.
  • display: flow-root.
  • Elements with contain: layout, content, or paint.
  • Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  • Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
  • Multicol containers (elements where column-count or column-width isn’t auto, including elements with column-count: 1).
  • column-span: all should always create a new formatting context, even when the column-span: all element isn’t contained by a multicol container (Spec change, Chrome bug).
翻译
  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
整理

因为不是很好记，所以可以这样定义：

默认这些能容纳正常流的盒，都认为会创建BFC，除一种情况之外：

里外都是BFC(Block Box)，并且overflow:visible，相当于没有BFC，会产生BFC合并

BFC 合并

float
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC合并与float</title>
  <style>
  </style>
</head>
<body style="height: 500px;background-color: blanchedalmond">
<!--BFC-->
  <div id="id1" style="float:right;width: 100px;height: 100px;background-color: aqua"></div>
<!--overflow:visible/hidden-->
  <div id="id2" style="background-color: pink;overflow: visible;margin: 30px;">
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字
    文字文字文字文字文字文字

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

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S5ebKyJu-1607418117472)(https://i.loli.net/2020/09/04/sAkTPfwRKV3buaZ.png)]

当id2为overflow: visible;时，id1的浮动与id2内文字形成了浮动关系，直接就不管id2了。但是当改成overflow: hidden后，来看看效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfV0EOKV-1607418117474)(https://i.loli.net/2020/09/04/1MHZDIKda2qrOGk.png)]

id1与id2形成了浮动关系，id2围绕id1了。这就是BFC合并与float

边距重叠
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="id1" style="width: 100px;height: 100px;background-color: pink;margin: 20px"></div>
  <div id="id2" style="overflow: visible;background-color: aqua;margin: 30px;">
    <div id="id2-1" style="width: 100px;height: 100px;background-color: pink;margin: 20px;"></div>
  </div>
</body>
</html>

效果：

BFC__margin1.png

Id1 与id2 id2-1都发生了边距重叠，中间的marigin为30px，相当于id2不存在一样。当把id2overflow改为hidden后来看看效果：

BFC__margin2.png

id2与id1发生了正常的BFC内的边距重叠，id2-1的margin回来了。

这就是BFC合并与margin。

参考

简述你对BFC规范的理解

块格式化上下文

总结

BFC真是个令人头疼的知识点，它就相当于一个盒子，盒子内外互不影响。这是我对BFC最初的理解吧，然后到现在工作中也没有碰到很复杂的BFC，所以有什么写的不对的地方，欢迎指出更正。当然如果觉得不错并且有帮助的话，欢迎点赞👍转发哦，转发注明一下来源就行。

nathan96
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BFC的原理以及应用场景
rain_zhh的博客
10-03 633
BFC的原理以及应用场景 一.定义 BFC(Block Formattin Context) 直译过来就是块级格式化上下文，它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关 FC(Formattin Context)是W3C CSS2.1规范中的一个概念,它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用,最常见的有
css布局之BFC模式（block formatting context）
09-24
主要介绍了css布局之BFC模式（block formatting context），通过BFC盒子的一些特性和应用场景解释了BFC模式，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
什么是BFC？BFC的原理是什么？BFC的应用
最新发布
tyxjolin的专栏
03-31 1119
在上面的代码中，我们首先使用clearfix hack来清除子元素的浮动，然后将父元素的overflow属性设置为hidden，以生成一个BFC来避免子元素的浮动影响到父元素的布局。在上面的代码中，我们将左栏设置为浮动元素，然后将右栏的overflow属性设置为hidden，以创建一个BFC，从而避免了左栏的浮动影响到右栏的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
史上最全面、最透彻的BFC原理剖析
weixin_42396384的博客
06-06 1888
本文讲了BFC的概念是什么； BFC的约束规则；咋样才能触发生成新的BFC；BFC在布局中的应用：防止margin重叠(塌陷,以最大的为准)； 清除内部浮动；自适应两（多）栏布局。1. BFC是什么？Block fomatting context = block-level box + Formatting ContextBox:　　Box即盒子模型；block-level box即块级元素dis...
BFC原理
rizon886的博客
07-24 213
BFC是什么？ BFC(Block Fomatting Context)为块级格式化上下文的的简称。 简单点说，把BFC看成一个渲染区域或者容器，在BFC这个容器内部的的元素无论如何布局都不会影响其外部的元素。 并且BFC还有它自己的一些特性，下面会说到。 BFC模式的形成条件如下（满足以下任意一条均可形成BFC）： 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-...
BFC 的原理浅析
sinat_33255495的博客
10-10 1392
一、BFC 是什么 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 　　 Formatting context Formatti
BFC-Book-Store
04-01
在深入探讨这个项目之前，我们首先需要理解什么是BFC（Block Formatting Context），它在CSS布局中扮演着重要角色。BFC是块级格式化上下文，是Web页面中块级元素渲染时的一种内部环境，它决定了元素如何对其内部和...
HTML-bfc初探
08-03
HTML中的BFC（Block Formatting Context，块级格式化上下文）是页面布局中一个非常重要的概念，它定义了块级元素如何在其包含体内布局。理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现...
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting ...
前端教程：一分钟带你揭开BFC神秘的面纱
黑马程序员官方博客
09-15 551
1. 引言 在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所帮助。 2
bfc是什么_全面分析总结BFC原理及实践
weixin_39603613的博客
11-23 295
前言 经常在面试中被问到“如何清除浮动？”、“为什么 overflow: hidden 可以清除浮动？”等等比较基础的问题。虽然这些题目案在各种写面试题的文章中都有提供答案，但这种教科书式的问答肯定不是我们的目的，与其记住答案不如彻底掌握其核心原理——块级格式化上下文（BFC）。这篇文章主要就是彻底分析清楚BFC原理、总结BFC经典场景中的用法，最后再实践分析解决布局中常遇到的问题。 本文首发自迪...
10 分钟理解 BFC 原理
jiaojsun的博客
07-30 1万+
一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元
BFC原理剖析
Moon Star
04-02 232
1.BFC 定义 　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　　 2.BFC的生成 上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，C...
什么是BFC？BFC的原理是什么？如何创建BFC？
前进的小申申
05-30 1万+
1，什么是BFC？ 1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。 2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），...
数据结构学习笔记——线性表之顺序表
HiSi_的博客
09-02 1527
线性表的定义： 具有相同性质元素的一个有限序列。 序列中所含元素个数为线性表的长度。 线性表中每个元素由逻辑序号唯一确定，逻辑序号是由1开始的，而物理序号（我们说的数组的下标是从0开始的）。 序列中的第一元素叫做表头元素，最后一个元素叫做表尾元素。 线性表的抽象数据类型描述： ADT List { 数据对象： D = {ai | 1<=i<=n, ai为ElemType对象} //ElemType是自定义类型的标识符， //在后面的讨论中，ai是结构体类型的。 数据关系： R =
详解 清除浮动 的多种方式（clearfix）
热门推荐
FEWY的博客
04-02 7万+
说明本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如
BFC原理及应用
LiXSnow的博客
12-15 283
原理： BFC（Block Formatting Contexts）块级格式化上下文 是一个独立的渲染区域，并且有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用 内部元素的布局方式不会影响到外部元素的布局，反之，同理 触发BFC的条件： 根元素 float的值不为none overflow的值不为visible display的值为inline-block、tab...
理解BFC的原理及其作用
web_hwg的博客
11-07 832
一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档
深入理解CSS BFC与层叠原理，掌握!important的应用
BFC（Block Formatting Context）是CSS布局中的一个关键概念，它定义了一个独立的渲染区域，使得元素的布局不会受到其他元素的影响。BFC主要包括以下特性： - **隔离浮动**：内部元素不会受到外部浮动元素的影响，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值