如何快速理解BFC（Block Formating Context）

最新推荐文章于 2022-07-15 20:32:26 发布
最新推荐文章于 2022-07-15 20:32:26 发布
阅读量211 收藏
点赞数
文章标签： css html
原文链接：https://b23.tv/BV16b411H7Pz
版权
为什么会有BFC呢？

在前端布局中，为了使样式达到自己设计的样子，我们会让元素脱离文档流，想像很美好，但是现实往往有差距。
BFC就是为了解决布局中排版的一些问题而出现的
在这里插入图片描述
在这里插入图片描述

BFC是什么？

块级格式上下文规定了内部块盒子是如何布局的，它是一个独立的渲染区域，且只有块级盒子参与，这个渲染区域与外部区域毫无关系
在这里插入图片描述
在这里插入图片描述

如何触发BFC?

设置CSS属性可触发BFC，实质就是设置块级盒子脱离文档流
在这里插入图片描述

BFC可以解决什么问题，这种问题还有其他解决方法吗？

  1. 浮动元素另父元素高度塌陷问题 浮动元素脱离了文档流 ，可给父元素添加下图所示：
    在这里插入图片描述
    在这里插入图片描述
    其他方法解决父元素塌陷：
    在这里插入图片描述

  2. 解决自适应布局
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 解决外边距垂直方向垂直问题
    由于BFC的特点才会引发外边距叠加的问题。
    在这里插入图片描述在这里插入图片描述
    其他方法实现：
    在这里插入图片描述
    在这里插入图片描述

参考视频为：视频链接[https://b23.tv/BV16b411H7Pz]

筱语悠里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css布局之BFC模式（block formatting context）
09-24
主要介绍了css布局之BFC模式（block formatting context），通过BFC盒子的一些特性和应用场景解释了BFC模式，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
Block Formatting Contexts(块级格式化上下文)
香巴拉
02-26 932
转自：Block Formatting Contexts(块级格式化上下文) 前几天看到kejun‘s blog里面的一篇文章：“近期面试感受”，里面提到面试时的一道题的不同的解决方案，比较它们之间的优缺点，其中出现了一个概念：Block Formatting Contexts(块级格式化上下文)，而我一点印象都没有，所以就找了一些相关的文章学习一下，看到一篇很好的文章，所以就翻译出来和大家
BFC（块级格式化上下文）
weixin_28686261的博客
07-08 101
BFC是Block Formatting Contexts缩写 Block 说明只针对块级元素 Formatting Contexts 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 通俗讲BFC就是页面上独立的一块渲染区域，只有块盒子参与，这个区域不受外界样式的影响，决定了子元素如何布局。 什么时候才需要BFC呢，但凡写css，就会需要BFC，那BFC解决了什么问题呢？. BFC的特性 属于同一个
Block Formating Context
weixin_30607659的博客
09-22 77
http://www.cnblogs.com/v10258/p/3530290.html Block Formatting Context(块级格式化上下文)是W3C规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 简单的说，当我们在进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，那么该元素就成为一个隔离的容器，元素的内部元素会垂直...
BFC（Block Formating Context）
caicsama的博客
03-07 111
BFC(Block Formating Context) ：块级格式化上下文，相当于一个盒子，起到隔离作用 规则： BFC起隔离作用，内部元素不会受外部元素的影响。 一个元素只能存在于一个BFC中，如果同时存在于两个BFC中，违反了 BFC的隔离作用 BFC中元素按正常流排列，元素之间的间隔用margin控制 BFC不会于外面浮动的元素重叠 计算BFC的高度，需要包括浮动子元素的高度 如何创建...
css-说说 Block Formatting Contexts (块级格式化上下文)
大小都是愁的成长之路
05-21 298
但说明 BFC 特性之前，Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案。定位方案是控制元素的布局，在 CSS 2.1 中，有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning)普通流(Normal Flow)在普通流中...
CSS理解块级格式上下文（BFC）
12-13
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建...
块级格式化上下文（Block Formatting Context）
letterTiger的博客
02-05 1176
CSS块级格式化上下文是块级盒子的一种能力，这种能力并不是直接通过css属性声明而获得的，而是添加css的一部分相关属性之后自动获得的能力，也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。 那么，没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 760
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
块级格式化上下文 Block formatting context （BFC）
monkeyHI
04-12 347
详情地址：块级格式化上下文 Block formatting context （BFC） 1. Box 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。 （1）块盒 当元素的display为block、list-item或ta...
BFC（Block Formatting Context）块级格式化上下文之深层解读
XH_jing的博客
02-23 826
BFC（Block Formatting Context）块级格式化上下文 注意：BFC首先是块，其次需要具备下面的条件之一才可以（通俗来说，BFC就好比一所985或者211的高校，想要成为985或者211的高校，它是有前提条件的，首先他得是一所大学，不能拿一个小学来说，就好比BFC得先是块，才是BFC；当满足了前提条件，再需要具备其他的条件才可以。） 在正式说BFC具体内容之前，先说一下Box...
第四章：CSS基础---伪元素选择器(权重1）、高度塌陷、BFC(Block Formating Context): 块级格式化上下文、css属性继承、表格css属性补充、表格标签补充、表单集
soulcow的博客
07-15 195
1.选择第一个字符只针对块元素元素first-letter{}元素2.选择第一行只针对块元素元素first-line{}元素3.给元素的里面的前面添加内容内联元素元素before{"";如果有字就加到引号里面，如果没字，就写空引号,必须存在red;100px;}4.给元素的里面的后面添加内容内联元素元素after{"";如果有字就加到引号里面，如果没字，就写空引号，必须存在}...
Formatting Context（BFC、IFC、GFC、FFC）
Jeremy_Lin_PC的博客
10-10 179
Box的定义 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 Box的类型 block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block
面试经常会被问到的BFC和IFC 你知道多少？
weixin_30781775的博客
09-13 531
先了解下BFC和IFC的FC是个啥？FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。 OK，接下来正式举例...
BFC（Block Formatting Context）
少油少盐不要辣
12-15 175
1.什么是BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。 2.BFC布局规则 内部的块级元素会在垂直方向，一个接一个地放置； 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生...
说说BFC（Block Formatting Contexts，块级格式化上下文）
happyqyt的专栏
03-19 236
一、BFC是什么？ BFC是容器的一种属性，从样式上看，具有BFC的元素与普通的容器没有什么区别，但从功能上，具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性。 二、BFC的特性 1、BFC会阻止外边距折叠 即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。 2、BFC可以包含浮动的...
什么是CSS BFC(Block Formatting Context)
MikeBison的博客
12-12 343
BFC的定义 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素
leetcode — 两数之和
Asuma0105的博客
08-06 96
第一次做，优化不够好。 方法一：暴力遍历 class Solution(object): def twoSum(self, nums, target): for i in range(len(nums)): # 这里用i+1：因为遍历的是同一个列表，不存在遍历元素缺失的问题， # 从i+1开始反而会让程序运行更快速 for j in range(i + 1, len(nums)):
深入理解CSS BFC与层叠原理，掌握!important的应用
BFC（Block Formatting Context）是CSS布局中的一个关键概念，它定义了一个独立的渲染区域，使得元素的布局不会受到其他元素的影响。BFC主要包括以下特性： - **隔离浮动**：内部元素不会受到外部浮动元素的影响，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值