web前端基础学习笔记（17）之 BFC解释与应用

最新推荐文章于 2024-05-04 23:45:18 发布
最新推荐文章于 2024-05-04 23:45:18 发布
阅读量201 收藏
点赞数 1
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fightingdddd/article/details/107880257
版权

BFC就是一块独立渲染区域，Display为block,list-item,table具有产生BFC条件。四个条件具有其一就可以触发BFC


生命真是个奇妙的东西，总是用尽全力去抓住前进的生活和向上的自己，与混沌人海中未来一起同行的你~

触发BFC

在这里插入图片描述

BFC元素所具有的特性

在这里插入图片描述

BFC主要用途

1：清除元素内部浮动

在这里插入图片描述

（2）解决外边距合并问题

在这里插入图片描述
在这里插入图片描述

（3）制作右侧自适应盒子

在这里插入图片描述
在这里插入图片描述

站起一棵树
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【web前端面试必问6】什么是BFC?
m0_56349322的博客
04-09 540
BFC叫格式化上下文。 我个人认为想要了解这个概念，先了解这个bfc可以解决什么问题？ 使用BFC来防止外边距折叠 由下面的图我们可以看出，正常情况下，apple 和 banana 应该有 40px的距离，因为apple 有下边距20px + banana上边距20px = 40px，然而实际中浏览器显示的只有20px。这就是所谓的哇编剧折叠的问题。两个外边距相聚在一起的时候，以最大的外边距作为最终的两个盒子之间的距离。如果apple下边距是40px，banana上边距是20px，则他们之间
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
BFC
Ee2222的博客
05-28 509
block formatting context 块级格式化上下文 MDN 对 BFC 的描述 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 一个块格式化上下文由以下之一创建： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定...
2024年Web前端最全【前端三剑客——CSS】之BFC为何物，前端开发入门与实战
最新发布
2401_84437691的博客
05-04 990
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心IFCIFC的line box (线框) 高度由其包含行内元素中最高的实际高度计算而来 (不受到竖直方向的padding/margin影响)。IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,便得line box宽度缩短。同个IFC下的多个line box高度会不同。FFC。
web前端总复习（二）：BFC
qq_40549954的博客
10-21 128
概念：BFC是块级格式化上下文，用于布局块级盒子的一块渲染区域。 BFC触发方式： ① 根元素，即HTML标签。 ② 浮动元素，即float为left、right。 ③ overflow的值不为visible，为auto、scoll、hidden。 ④ display的值为inline-block、flex、grid、table等。 ⑤ 定位元素，即position为absolute、fixed。 作用： ① 清除浮动。 当子元素存在float属性时，父容器没有设置高度，父容器的高度由子元素撑起..
WEB前端之BFC问题：面试经典知识
weixin_47673761的博客
06-24 136
官方文档：块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。可以简单的理解为块盒子与其它同级块盒子之间的区域。...
Web前端工程师必须要知道的BFC(块级格式化上下文)！！！
帅帅邬同学的博客
04-22 156
BFC(块级格式化上下文) BFC(Block Formatting Context) 直译为"块级格式化上下文"。 元素的显示模式 我们前面说过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 那些元素会具有BFC的条件 不是所有的元素模式都能产生BFC。 w3c 规范： display 属性为 block, list-it...
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础，它们共同决定了页面的结构与样式。BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而BFC（Block Formatting Context，块格式化上下文）则是CSS布局... BFC规范（下）.mp4”视频，可以更直观地学习和掌握这些概念和技巧，进一步提升对Web前端布局的理解。
前端bfc的介绍与使用
02-23
关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。
web前端学习什么是BFC
qf2019的博客
08-20 1169
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。web前端学习什么是BFC BFC(Block Formatti...
前端技术之BFC
weixin_43675915的博客
03-07 233
什么是BFC 块级格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域(如:非BFC元素重叠)。 实际上BFC就是HTML元素的一种文本渲染状态，一个HTML文档中的最大的BFC就是根元素，当一个标签满足某些规则是，其本身就是一个BFC模块，BFC内部的元素不受外部元素的影...
Web前端之高度塌陷与BFC
花&败
10-25 456
A：我们知道，网页的结构思想是：结构+表现+行为。在box2下直接定义一个box3，属于结构；而使用伪元素选择器，属于表现而高度塌陷问题属于表现问题，定义box3的目的是为了撑起box1的内容，属于表现，而不是结构，所以在css中定义。
面试官提问：什么是BFC？BFC基本问题
熟悉 vue2 vue3 jquery js echarts
11-26 625
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
DaZeng：BFC的概念、触发、作用及应用
大曾blog
10-24 792
10.21-10.25之 WEB任务（一） 1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。 2、清除浮动（好像是五种还是六种方式） 3、BFC（概念、触发、作用、应用） 4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下） 5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行） 6、轮播图:js原生...
什么是BFC（初级入门介绍）
小狼驿站
09-23 3984
原文地址链接：http://div.io/topic/834?page=1#3261 说到BFC，就会涉及到CSS布局的一些基本概念，然后，首先来讲一下关于块级盒的一些概念： 下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting)： Block-level ele
BFC是什么？有什么用？
热门推荐
吕大瓜的博客
05-25 1万+
什么是BFC（Block Formatting Context ） 定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 可以理解为BFC是一个块独立的作用域，它有些自己的特性 那如何产生...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值