BFC（块级格式化上下文）

最新推荐文章于 2023-08-04 16:23:59 发布
最新推荐文章于 2023-08-04 16:23:59 发布
阅读量139 收藏 1
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34574204/article/details/116520556
版权

1.BFC（块级格式化上下文）

块级格式化上下文，Block Formatting Context，也就是常说的BFC，属于css渲染／布局过程中生成块级区域／浮动元素与其他元素的交互限定区域

BFC对浮动、定位、清除浮动都很重要，三者只会对同一个BFC内的元素起作用。

  • 浮动不会影响BFC的中元素的布局
  • 清除浮动职能清除同一个BFC中在他前面元素的浮动
  • 外边距折叠只会发生在同一个BFC的块级元素之间

什么时候会创建BFC
1. float 元素属性不为none 或者position属性不为absolute／fixed时
2. 行内块元素display属性为inline-block
3. overflow的值不为visible的元素
4. 弹性元素(display为flex或inline-flex元素的直接子元素)

2.BFC的特性

两个相邻的普通流中的块元素垂直方向的margin会发生折叠

在这里插入图片描述

BFC可以包含浮动的元素

在这里插入图片描述

大莲芒
关注
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 450
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
BFC块级格式化上下文--小技巧
JackieDYH的博客
02-19 318
特性： （1）形成BFC的元素，会在垂直方向叠加margin （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin） （2）形成BFC的元素，不会与浮动元素重叠 （3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局 （4）形成BFC的元素的高度会将浮动元素计算在内。 形成BFC的条件 （1）根标签 （2）float不为none （...
BFC(块级格式化上下文)
weixin_30794851的博客
04-22 104
BFC(Block formatting context) 直译为"块级格式化上下文"。元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素行内元素行内块元素 ，其实，它还有很多其他显示模式。 <img src="media/dis.png"style="border: 1px dashed #ccc; padding: 5px;" /&gt...
BFC块级格式化上下文
MelodyFreedom的博客
05-12 279
BFC（block formatting context ）块级格式化上下文 ，究竟是什么呢？看完就明白了。。 BFC 目的是什么？目的是为了形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局，怎么样才能形成这样一个独立的空间呢，可以通过设置元素的属性，如果我们设置了某个元素的属性，这个元素的属性使得这个元素形成了一个独立的空间，那么就可以说触发了BFC，到这里还没有明白怎么回事，甚至更加不明白说了什么？接下来看个例子： 一：解决父元素坍塌的问题 以下是一个正常的页面，我们看到效果如下.
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
前端CSS理解 —— BFC(块级格式化上下文)
最新发布
upgrade_bro的博客
08-04 178
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
什么是BFC
weixin_34095889的博客
06-30 235
  在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上...
BFC 块级格式化上下文
baichaji的博客
03-27 189
BFC是一块独立的渲染区域，它规定了在该区域中，常规流块级盒子的布局。一个BFC区域宝含创建该上下文的所有子元素，但是不包括创建了显得BFC区域的子元素。创建了BFC的元素，它内部的元素不送外部元素影响，也不会影响外部元素，是一个独立的区域。
深入理解前端面试关键：BFC块级格式化上下文
"前端大厂最新面试题-BFC" 在前端开发中，Block Formatting Context (BFC) 是一个至关重要的概念，它涉及到网页布局和样式计算。BFC 是页面渲染时的一个独立区域，其中的元素按照特定规则进行排列，而这些规则与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值