如何理解BFC

已于 2022-06-30 21:35:05 修改
阅读量180 收藏
点赞数
文章标签： 前端
于 2022-06-28 22:48:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qiemo_/article/details/125511245
版权

什么是BFC

BFC(Block formatting contexts) 块级格式化上下文,它是文档中的一块渲染区域,有自己的一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用

BFC的目的是形成一个相对于外界完全独立的控件,让其内部的子元素不会影响到外部的元素

如何触发BFC

  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位的元素(元素的position为 absolute 或者fixed)
  • 行内块元素(元素的display 为inline-block)
  • 表格单元格(元素的display为 table-cell,HTML表格单元格默认为该值)
  • overflow不等于visible 为auto scoll hidden

BFC的特性

  • 同一个BFC的上下外边距会合并,与方向无关
  • 内部的盒子会在垂直方向上一个接一个的放置
  • 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 清除浮动(BFC可以包含浮动的元素)
  • BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

应用场景

  • 防止margin塌陷
  • 清除内部浮动
  • 自适应多栏布局

Qiemoer
关注
CSS-全面理解BFC
weixin_46245467的博客
02-20 82
全面理解BFC 1. 常见的定位方案 普通流 - 元素按照它在HTML中的先后位置自上而下布局 - 行内元素水平排列，直到当行被渲染完成后换行，块级元素自己独占一行 - 所有的元素默认都是普通流定位的 浮动 - 元素首先按照普通流位置出现，然后尽可能的向左或者向右偏移 绝对定位 - 元素整体脱离普通流，绝对定位元素不会对兄弟元素造成影响 2. BFC定义 BFC(Block formatting context) 块级格式化上下文，独立的渲染区域有着自己的渲染规则，与这个区域外部
10分钟理解CSS BFC原理及其应用
09-27
理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 首先，我们来看看BFC的常见定位方案。在CSS布局中，有三种基本的定位方式： 1. **普通流（Normal Flow）**：这是元素默认的布局方式，元素按照它们...
深入理解BFC
weixin_34081595的博客
10-14 152
一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。Bloc...
浅谈BFC和IFC
weixin_34358092的博客
04-15 155
先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域。而且有一套渲染规则，它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。 BFC BFC（Block Form...
BFC到底是什么？如何理解
TeroZhang的博客
02-16 1823
BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
谈谈你对BFC的理解
tang18533952786的博客
01-06 358
谈谈你对BFC的理解
【谈谈你对BFC的理解？】
m0_45991266的博客
09-16 1172
官方定义：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单的理解：BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
深入理解BFC：布局规则与应用实例
理解BFC的关键在于掌握其布局规则。 首先，BFC内的盒模型（Block-level Box）遵循严格的垂直排列顺序，从上到下依次堆叠，如同书籍中的页码，不会受其他BFC元素干扰。这在图1和图2中通过三个具有相同属性的div展示...
TensorFlow内存管理：深入理解BFC算法
"本文介绍了TensorFlow内存管理中的BFC（Best-Fit with Coalescing）算法，包括算法的基本思想、申请和释放过程以及bins数据结构。" 在TensorFlow中，内存管理是一个关键环节，以确保高效的计算和避免内存碎片。BFC...
BFC是什么？BFC的四种理解方式
H2366760809的博客
01-12 2934
一 、BFC的解释： 块级格式化上下文，是一块独立的渲染区域，BFC的特性容器里面的元素不会影响外边元素布局，当然外部的元素也不能影响内部元素的布局 二​​ 、原理： ①、内部的box垂直排列 ②、BFC元素的垂直方向，外间距由 (margin) 决定 ③、BFC内的元素和 (float) 区域的元素不会重叠 ④、BFC是一个页面上的独立容器，外面的元素不会影响里面 BFC里的元素，反...
什么是BFC？最直观的解读在这里
qq_42000660的博客
07-18 562
一、了解BFC BFC的定义： 对于新手来说，这个解释真是。。。。
面试官: 谈谈你对BFC的理解以及外边距合并的问题
qq_63299825的博客
06-05 2042
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,1.内部的盒子会在垂直方向上一个接一个的放置2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此4.BFC的区域不会与float的元素区域重叠5.计算BFC的高度时，浮动子元素也参与计算。
BFC是什么？简单易懂，个人总结，一篇文章让你理解掌握BFC
qq_46325260的博客
12-07 3163
最近了解了一下前端面试题，发现有一个名词经常出现，那就是BFC BFC是什么呢？ 我们好像感觉这是新出的什么东西吗？怎么突然就闯入我们的世界了？ 实则不然，其实呢 BFC 在前端随处可见，只要你有过接触，接触过前端，写过静态网页就已经和它打交道了。 接下来我们一起来看看 BFC是怎么定义的。 定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的 Block-level B
什么是BFC？看这一篇就够了
热门推荐
Leon的博客
03-23 27万+
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局...
JS中BFC如何理解？
LeakCollector的博客
10-29 3768
BFC解析 BFC是什么？： bfc全称为块级格式化上下文(Block Fromatting Context)。 BFC如何产生？： 满足一下其中一种条件就可以触发BFC。 position:absolute; display:inline-block、table-cell、flex、table-caption或者inline-flex。 float:left/right; overflo...
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 389
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
浅析BFC及其作用
riddle1981的博客
08-05 2万+
一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不
深入理解BFC和Margin Collapse
weixin_30247307的博客
10-11 176
BFC的理解与应用 因为BFC的理解对我们完全地弄懂margin collapse是不可缺少的。所以让我们先来认识一下BFC。 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。 什么是BFC（Block formatting contexts） w3c规...
做一个能适配「手机」的网站需要注意什么
最新发布
illidri的博客
11-01 251
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值