11.BFC是什么？怎么触发？BFC有什么作用？

最新推荐文章于 2024-08-25 15:43:07 发布

顾洛笙

最新推荐文章于 2024-08-25 15:43:07 发布

阅读量148

点赞数 1

文章标签：前端开发语言 html css

本文链接：https://blog.csdn.net/qq_56491274/article/details/128181347

版权

BFC: block fromat content

块级格式化文档
一种模式
网页渲染隐藏模式，网页刚开始渲染的时候默认不会有的
需要我们手动去触发(默认没有)

BFC的作用：

规范我们的文档，不要有浮动流带来的影响
和右键 格式化文档的作用是一样的，规范代码

BFC触发：

overflow：hidden
overflow：内容溢出
hidden：隐藏
scroll：滚动条

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

顾洛笙

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
11.BFC是什么？怎么触发？BFC有什么作用？

BFC是什么？怎么触发？BFC有什么作用？
复制链接

扫一扫

什么是BFC？它的触发条件有哪些？

越陌度阡

11-13

2702

1. 什么是BFC? Block Fromatting Context，即块级格式上下文。 W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。 2. BFC的触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1.根元素； 2.浮动元素。元素..

前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)

qq_52287721的博客

12-29

512

BFC 文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么？首先要介绍一下关于文档流相关的知识。文档流分为三个部分：普通流；定位流；浮动流；这三种流在布局的时候会相互影响，进而产生一些问题。这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。 BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF

参与评论您还未登录，请先登录后发表或查看评论

BFC是什么？如何触发？BFC解决了什么问题？

夏天的博客

01-05

849

1.BFC是指什么？ BFC = Block Formatting context 意思是块格式化上下文，BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素无论如何布局，都不会影响到区域外元素的布局。这个渲染区域只对块级元素起作用。 2.常见的触发BFC有什么方式 1.浮动元素（float不为none） 2.绝对定位的元素（position为absolute或者fixed） 3.overflow不为visible的块级元素 4.display值为flex、 flow-root 、inlin

如何触发BFC，以及BFC的作用?

BaekhyunDE的博客

09-10

135

如何触发BFC，以及BFC的作用?

什么是BFC，如何触发BFC,BFC的作用

打工人

04-19

2987

BFC：块级格式化上下文理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. BFC的布局规则一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边，与包含块border box的左边相接触四、BFC的区域不会

【CSS】什么是BFC？BFC有什么作用？

m0_61049675的博客

02-05

3083

BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。：只需要把两个div放置不同BFC中，那这两个BFC的内容将不会互相干扰，将两个di分别放置container容器中，然后通过overflow:hidden触发BFC;：这是因为给子元素添加了浮动，使它脱离了文档流；：红色方框覆盖蓝色方块；

BFC是什么？怎么触发BFC?

weixin_42560424的博客

05-10

650

BFC是“块级格式化上下文”的缩写，是一个独立的渲染区域，内部的元素按照一定规则进行布局，不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题，例如清除浮动、防止margin重叠等。

什么是BFC？BFC的形成条件？BFC的应用场景

qq_52822043的博客

09-15

2156

BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。

BFC是什么？如何触发BFC？（实现两栏/三栏布局）

weixin_56180673的博客

10-29

1329

BFC是什么？如何触发？两栏/三栏布局如何实现？

什么是BFC，哪些元素会产生BFC

c_l_a_n_n_d的博客

07-27

950

根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflowhidden;每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...

前端CSS必知：BFC及其触发条件

清颖的博客

08-08

6648

文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。将本人好久之前的云笔记搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文）可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。可通过css属性触发。浮动元素产生了浮动流，块级元素看不到；文本类属性的元素（inline)，文本元素和产生了bfc的元

vue ref和reactive区别

灰海

08-25

1204

在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。

前端开发攻略---在Vue3项目中修改Element-Plus主题色

nibabaoo的博客

08-22

434

在Vue3项目中修改Element-Plus主题色

vue中定义一个url文件,在vue文件中引入

weixin_65767506的博客

08-22

540

1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.

前端宝典十六：深入浅出8大设计模式

franktaoge的博客

08-24

1301

本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：

【React】React事件和HTML事件的区别

owo_ovo的博客

08-23

578

【React】React事件和HTML事件的区别

前端审查_Nginx

阿宝的博客

08-22

391

vueCli/vite/cra/umi等都是运行 build脚本build如何定义打包生产环境代码配置在配置文件 vue.config.js中。

浏览器精度问题