什么是bfc

最新推荐文章于 2024-09-03 21:44:01 发布

zh_1111

最新推荐文章于 2024-09-03 21:44:01 发布

阅读量49

点赞数

分类专栏：前端文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/zh_1111/article/details/129205026

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

BFC是一种CSS渲染模式，定义了block-levelbox的布局规则，防止margin塌陷，清除浮动效果，并阻止文字环绕。它可以由根元素、非可见溢出、浮动元素、绝对或固定定位以及特定display属性触发。

摘要由CSDN通过智能技术生成

什么是BFC?

BFC（block formatting context）是web页面中盒模型布局的CSS渲染模式，

“块级格式化上下文”，它是一个独立的渲染区域，只有block-level box参与，它规定了

内部的block-level box如何布局，并且与这个区域外毫不相干。

条件：

1：根元素

2：overflow的属性值不为visible

3:float也可以生成bfc（属性不为none）

4：position属性为absolute和fixed

5：display属性值为inline-black

解决的问题：

1：防止margin的塌陷

2：清除浮动

3：避免文字环绕

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zh_1111

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是bfc

推荐看看
复制链接

扫一扫

专栏目录

什么是BFC

web2001chu的博客

08-25

1231

1，什么是BFC？ 1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。 2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流 3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为block

什么是BFC？

weixin_48181168的博客

09-07

3517

1.BFC到底是什么东西 BFC 全称：Block Formatting Context，名为 "块级格式化上下文"。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 2.怎

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

什么是BFC？看这一篇就够了

热门推荐

Leon的博客

03-23

27万+

BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局...

什么是BFC，他有什么用？

sqLeiQ的博客

06-13

3万+

BFC 是什么？

什么是BFC？BFC可以解决什么问题

06-16

9506

一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi

什么是 BFC

weixin_46258341的博客

07-20

元素首先按照普通流的位置显示，然后根据浮动的方向尽可能的向左或向右边便宜。BFC 属于普通流，是一个独立的区域，渲染规则和外部无关。1、讲 BFC 之前，先了解有哪些文档流。4、BFC 能解决什么问题。元素会整体脱离普通流。3、BFC产生的方法。

什么是BFC？它有什么作用？如何创建BFC？

官方推荐

08-11

5981

什么是BFC？它有什么作用？如何创建BFC？

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

m0_61049675的博客

02-05

3213

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

什么是BFC？ CSS 使用伪元素清除浮动的方法

12-13

BFC概念：　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...

zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1

07-25

字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo

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

c_l_a_n_n_d的博客

07-27

957

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

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

越陌度阡

11-13

2707

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

Vue前端路由详解——以Ruoyi框架为案例学习

最新发布

警警的博客

09-03

703

Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。

前端的面试题

本人小可爱

08-30

746

【代码】前端的面试题。

跨页面进行数据通讯

榴莲不好吃的专栏

09-02

402

Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。

vue 通过事件的形式调用全局组件

liux6687的博客

08-29

1681

通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。

js对象操作常用方法

m0_75276704的博客

09-02

482

2.构造函数创建 2.方括号三、添加属性四、删除属性五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个

从面向对象(OOP)到面向切面(AOP)：编程范式的演变

妍思码匠的博客

08-30

1341

本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。

css中的BFC是什么

06-06

BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行布局。在 BFC 中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（对于从右到左的格式化，右外边缘会触碰到右边缘），即使存在浮动也是如此。 BFC 的触发条件： - 根元素（html） - float 不为 none - position 为 absolute 或 fixed - display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 或 table-column 等 CSS3 属性 - overflow 不为 visible BFC 的主要作用: - 清除浮动：在 BFC 中，浮动元素会被包裹在一个矩形框中，不会影响到外部元素的布局，从而可以解决父元素高度塌陷的问题。 - 防止 margin 重叠：在 BFC 中，相邻元素的 margin 会被分开，不会发生重叠的现象。 - 控制元素的布局：在 BFC 中，元素的布局是相对独立的，不会受到外部元素的影响，从而可以控制元素的位置和尺寸。