对BFC规范的理解

已于 2022-09-19 20:02:47 修改
阅读量230 收藏
点赞数
文章标签： 开发语言 javascript 前端 html
于 2022-07-21 19:34:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53701739/article/details/125919456
版权

BFC就是页面上的一个隔离的独立容器，

容器里面的子元素不会影响的到外面的元素.
  1.了解BFC:块级格式化上下文
  2.BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素
  3.如何触发BFC    (也就是，重新执行属性)
            float的值非none
            overflow的值为visible
            display的值为inline-block...
            position的值为absoute,fixed

 

A了LONE
关注
haslaylout 和 bfc解析的理解
09-22
BFC（Block Formatting Context），即块级格式化上下文，是CSS中的一种布局方式，它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用。BFC在Web前端开发中是一个重要的概念，尤其在解决布局问题时，...
面试官: 谈谈你对BFC的理解以及外边距合并的问题
qq_63299825的博客
06-05 2057
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,1.内部的盒子会在垂直方向上一个接一个的放置2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此4.BFC的区域不会与float的元素区域重叠5.计算BFC的高度时，浮动子元素也参与计算。
BFC规范的理解
weixin_45656737的博客
09-24 709
视频：click 【理解】：块格式化上下文（block formatting context），一个新的BFC盒子是独立布局，盒子内子元素样式不会影响到外面的元素， 【触法BFC】： 浮动元素 float ＝ left | right 或 inherit（≠ none） 绝对定位元素 position ＝ absolute 或 fixed display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption overflow ＝ h
【CSS】对 BFC 规范的理解
Dora_5537的博客
08-09 468
常见的定位方案 定位方案用于控制元素的布局，有三种常见方案: 1）普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 2）浮动 (floa...
【面试题】BFC详解
zx1041561837的博客
11-15 795
Block format context(BFC)，块级格式上下文。BFC是一个独立的布局环境，BFC内部的元素的渲染不会影响到边界以外的元素。
【谈谈你对BFC的理解？】
m0_45991266的博客
09-16 1178
官方定义：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单的理解：BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
10分钟理解CSS BFC原理及其应用
09-27
BFC是Block Formatting Context的缩写，它是W3C CSS2.1规范的一部分，描述了一种特定的渲染环境。在这个环境中，元素的布局受到BFC规则的控制，包括元素如何相互定位，以及与其他元素的关系。 以下是一些触发BFC...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而BFC（Block Formatting Context，块格式化上下文）则是CSS布局... BFC规范（下）.mp4”视频，可以更直观地学习和掌握这些概念和技巧，进一步提升对Web前端布局的理解。
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting Context，它是由W3C CSS2.1规范定义的一种渲染规则，用于确定元素如何在其内部以及与其他元素相互作用进行布局。创建BFC的元素会形成...
3、什么是BFC以及他的作用
abuanden的博客
02-25 352
BFC（Block formatting context）什么是BFCBFC的布局规则如何创建BFCBFC的作用1.利用BFC避免margin重叠。2.自适应两栏布局3.清除浮动。总结 转载自：什么是BFC？ 什么是BFC BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box
BFC详解(面试题)
知识点沉淀包括不限于前端
04-24 844
css bfc含义 bfc特性 bfc用处 如何生成bfc 面试必问
【CSS面试题】BFC
weixin_63681863的博客
03-02 659
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
高频面试题:BFC
2301_77168272的博客
09-18 87
float的值不是none,position的值不是 static 或 relative ,displiay的值是inline-block 或 table-cell 或 flex 或 table-caption 或 overflow的值不是visible;1, 解决父子的外边距折叠问题(因为BFC 模型 只作用于本身的内部元素,就是父子关系),给父元素加入上述的css属性即可,(注意:无法解决父元素兄弟之简的外边距折叠问题)
对BFC规范（块级格式化上下文: Block Formatting Context) 的理解？）
weixin_43850639的博客
03-09 129
比如这个灰色的边框，萎缩在页面顶端，它本该包住橙色盒子123的，但是却没有包住，加了overflow: hidden之后才能实现BFC，包住橙色盒子123。然而，这种方法会使元素脱离正常的文档流，可能导致其他布局问题。④position的值为absolute、fixed会创建一个新的BFC。我们最常用的 还是overflow: hidden.这种方法通常对布局和样式的影响最小。2、BFC的原则：如果一个元素具有BFC，那么内部元素再怎么折腾，都不会影响外部的元素。1、了解BFC: 块级格式化上下文。
前端面试：被问到BFC，要这样答才能满分，2024年最新前端页面适配怎么做
m0_61549353的博客
04-14 826
假定给这两个外边距分别设置20px，那么我们很容易想到：两模块的距离 = 20px + 20px，也就是中间相隔40px距离。可见，只需要给父容器设置overflow: hidden属性就会触发BFC特性，这个父容器就会变为一个特殊的“(若两边距不相等，选其最大的外边距作为两者之间的距离)。要想解决外边距合并的问题，我们只需要在原基础上，向父元素添加overflow：hidden属性即可。，而要解决这一现象，我们就需要清除浮动，这里我们就可以用到。因此这就是为什么BFC能清除浮动带来的负面效果的原因了！
2024年前端最新前端面试：被问到BFC，要这样答才能满分，面试题目与答案
最新发布
2401_84617431的博客
05-13 663
而要解决这一现象，我们就需要清除浮动，这里我们就可以用到了：触发BFC的条件很多，这里我们以向父元素添加overflow(hidden)为例：（下面一节，我会为大家总结触发BFC条件有哪些常用方式）div {我们只需要在原基础上，向父元素添加overflow：hidden属性即可可见，只需要给父容器设置overflow: hidden属性就会触发BFC特性，这个父容器就会变为一个特殊的“其实这里展现了一个。因此这就是为什么BFC能清除浮动带来的负面效果的原因了！
什么是BFC？BFC可以解决什么问题
06-16 9579
一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi
BFC面试题
m0_59070120的博客
04-05 466
BFC就是，块级格式化上下，就是一个独立不受外界干扰也不干扰外界的盒子. 如何生成BFC 根元素；html标签就是一个BFC。 float不为none position为absolute或fixed display为inline-block,table-cell,table-caption,flex,inline-flex overflow不为visible 应用场景 1，防止margin发生重叠 2，避免某元素被浮动元素覆盖，有时一个盒子浮动可能会覆盖掉另一个盒子，让被覆盖的盒子也生成b.
关于BFC（前端常见面试题）
banzhangshenlin的博客
07-09 2035
1、什么是BFC？ BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的； 2、如何触发BFC？ float的值不是none、position的值不是static或relative 、display的值是inline-block 或 table-cell 或 flex 或 table-caption 或 inline-flex、overflow的值不是visible； 3、B
深入理解BFC规范：前端开发从入门到精通
BFC规范（上）.zip" 知识点： 1. HTML基础：HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它是构成网页内容的骨架，通过各种HTML标签来定义内容结构。在Web前端开发中，HTML是基础的基础，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值