BFC 块级格式上下文

最新推荐文章于 2023-09-10 15:51:11 发布
最新推荐文章于 2023-09-10 15:51:11 发布
阅读量198 收藏
点赞数
分类专栏： 笔记 文章标签： 前端 javascript html
本文章版权只限本人所有
本文链接：https://blog.csdn.net/sylvia_0815/article/details/121518124
版权

是指一个独立的块级渲染区域。只有Block-level Box 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

举一个没有BFC的例子：·

一个盒子在不设置高度的时候，内容子元素都浮动时，该父级盒子是无法撑起自身的。所以说这个盒子没有形成BFC。

如何创建BFC？

1.float的值不是none

2.position的值不是static 或者  relative

3.display的值是inline-block、flex或者inline-flex

4.overflo:hidden;

BFC的其他作用：

BFC可以取消盒子的margin塌陷（margin塌陷是指父级没有设置margin但是子元素的margin会让父元素看起来设置了margin）

BFC可以组织元素被浮动元素覆盖（不常用）

sylvia_0815
关注
专栏目录
块级格式上下文(BFC)
qq_33911541的博客
05-31 403
块级格式上下文(BFC)
CSS理解块级格式上下文（BFC）
12-13
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建...
BFC块级格式上下文
apple_2021的博客
09-02 271
浅谈BFC,IFC,GFC,FFC格式化上下文 BFC BFC布局规则 1.内部的盒子会在垂直方向，一个个地放置 2.垂直方向距离由margin决定 3.每个元素的左边与包含该元素的左边相接触 4.BFC区域不会与float重叠 5.BFC是隔离的独立容器 6.在计算BFC高度时，浮动元素也参与在内 触发BFC布局 1.body根元素 2.浮动元素：float除none之外的值 3.绝对...
BFC块级格式化上下文
ct5211314的博客
03-20 506
1.一个BFC区域只包含其子元素，不包括其子元素的子元素。2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。
【CSS】BFC块级格式上下文的说明与应用
最新发布
Fortaro的博客
09-10 186
本文章对BFC块格式上下文的含义，原理进行说明，并且附加常用的应用场景。
BFC 块级格式化上下文
汤姆猫的博客
05-15 547
BFC（块级格式化上下文）是CSS中重要的概念之一，它可以影响到元素布局和渲染。在本文中，我们将深入探讨BFC的相关知识，包括什么是BFC、BFC的触发条件、BFC的作用以及如何利用BFC解决一些常见的布局问题等。BFC全称为“块级格式化上下文”，它是一个独立的渲染区域，主要用于控制块元素的布局和浮动元素的影响。每个BFC都有自己的渲染规则，不会受到外部影响，并且内部元素也不会影响到外部元素。在上面的代码中，将容器元素设置为BFC，使用overflow属性来触发BFC。二、BFC的触发条件。
CSS日常随笔:BFC块级格式上下文
小花的前端博客
12-07 271
概念BFC 即 块级格式上下文.也就是独立的块级渲染区域，只有块级元素才能参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。原理 块级元素会在垂直方向上一个接一个的放置. 垂直方向上两个块级元素之间的距离由margin的值来确定. 块级元素不与浮动元素重叠. BFC是一个独立的容器,其中的子元素不会影响到容器外的内容. 每个元素容器块。即使存在浮动也是如此； 作用解决相邻元素边距重
BFC 块级格式上下文的定义、创建、特点和常见用途
Ahua_Core的博客
07-06 403
BFC 块级格式化上下文的定义、创建、特点和常见用途BFC的定义BFC的创建BFC的特点BFC的用途① 创建BFC，从而消除垂直外边距叠加的现象② 创建BFC，清除浮动带来的影响③ 创建BFC，构建自适应两列布局 BFC的定义 概况如下： BFC 即 Block - Formatting - Context，它是一个仅有块级盒子参与的独立渲染区域。 BFC 规定了这个独立渲染区域内的参与元素（块级盒子）是如何布局的 BFC 是一个独立渲染区域，与外部区域无瓜葛。 BFC的创建 若一个元素具备以下任一特性
css之BFC块级格式化上下文
low666的博客
04-08 581
css之BFC块级格式化上下文 BFC 定义 BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素作用。 ...
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3801
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
如何理解 CSS 布局和块级格式上下文
09-27
CSS布局和块级格式上下文（Block Formatting Context，简称BFC）是理解CSS布局机制的关键概念。BFC是一个独立的布局环境，它有自己的渲染规则，能够决定内部元素如何排列以及与外部元素如何交互。在CSS中，BFC主要...
git pull 报错：error: Pulling is not possible because you have unmerged files.
热门推荐
不二喵老师
05-30 2万+
报错： $ git pull error: Pulling is not possible because you have unmerged files. hint: Fix them up in the work tree, and then use 'git add/rm <file>' hint: as appropriate to mark resolution and make a commit. fatal: Exiting because of an unresolved co
session和sessionStorage 解析
不二喵老师
02-19 6016
两者完全不是依赖关系或者是相同关系。 1.session存储于服务器，也就是后端那；而sessionStorage存储于本地，也就是你一按F12就能看到。 2.session主要的作用是维持会话状态的key，而sessionStorage则是存储会话期间的数据。（有些人经常认为是sessionStorage中存session，这个理解也对，也不对。可以说成是：浏览器的window对象中的ses...
正则表达式 必须由小写字母、数字字符“-”或“.”组成，并且必须以字母数字字符开头和结尾
不二喵老师
12-03 3816
var pattern = /^[a-z0-9][a-z0-9-\.]+[a-z0-9]$/; str = ''; console.log(pattern.test(str)); 细节分析： ^[a-z0-9] 是指以字母数字字符开头 [a-z0-9]$是指以字母数字字符结尾 [a-z0-9-\.]+是指 中间字符可以是a-z0-9、-和. 这四种字符任意书写 ...
关于JSON.parse(JSON.stringify(this.list))深拷贝浅拷贝的浅显使用
不二喵老师
10-08 2970
由上图可知，给我的是一个数组，但是要求的是一个是展示全部，而另一个展示的是二级(即只展示到公司) 数据如下图 已知删除对象中某个key以及key所关联值 的 方法 为 delete(对象.key名) 但是如果用该方法 就会改变原始数组。我们就需要用到深拷贝方法。 讲后端传来的数组 设置为原始数组。 let father = [ {id:1,name:'一级'}, {id:2,name:'一级', child:[ ...
浅析 广度优先遍历（BFS）和深度优先遍历（DFS）
不二喵老师
10-28 2959
想要了解广度优先遍历（BFS）和深度优先遍历（DFS）我们需要先了解图的概念。 图的定义： 图在数据结构中是中一对多的关系，一般分为有向图、无向图和权重图。常用 邻接矩阵 或者 邻接链表 来表示图中结点的关系 有向图（Directed Graph）：有向图中的相连线是有方向的。 无向图（Undirected Graph）：在无向图中，每个顶点和其他顶点通过相连线连接。 权重图（Weighted Graph）：在权重图中，每条相连线有各自的权重。 ...
js/vue 下载二进制文件流
不二喵老师
07-28 2572
简单来说下载二进制文件流就是将二进制文件流存在 Blob 对象中，再将其转为 url 对象，最后通过 a 标签下载。 //封装下载 export function downLoadFetch(url, params = {}, config={}) { //取消 const downSource = axios.CancelToken.source(); document.getElementById('downAnimate').style.display = 'block';
table 使用 table-layout: fixed 导致rowspan无效
不二喵老师
01-13 2029
需要的样式是thead固定位置，tbody固定高度可滚动（但不要显示滚动条）。 期待： 结果变成了： 错误的css为： 错误原因： 因为tr的table-layout:fixed;导致整个列表无视rowspan，导致上图那样的情况 解决办法： 使用两个div 分别包两个table ...
js正则表达式 只有小写字母和数字 不允许全数字
不二喵老师
08-04 2022
let str = '123456aaa'; let reg= /^(?!^[0-9]*$)^([a-z0-9]{8,16}$)/; console.log(reg.test(str));
深入理解CSS布局：块级格式上下文（BFC）
"本文主要介绍了CSS布局中的重要概念——块级格式上下文（BFC，Block Formatting Context），以及如何理解和创建BFC。" 在CSS布局中，块级格式上下文（BFC）是一个至关重要的概念，它定义了块级元素如何在页面上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值