BFC的学习

最新推荐文章于 2024-05-02 20:03:26 发布
原创 最新推荐文章于 2024-05-02 20:03:26 发布 · 113 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
BFC（Block Formatting Context）是CSS布局中关键的概念，用于创建独立的渲染区域，避免元素间的相互影响。主要应用于解决高度塌陷，即子元素浮动导致父元素无法获取其高度的问题，以及相邻元素外边距重叠的现象。通过设置浮动、绝对定位、overflow非visible等方式可以触发BFC。理解和应用BFC能够更好地掌控页面布局和样式隔离。

BFC的学习

BFC是什么

BFC(Block Fromatting Context)，即块级格式上下文
BFC可以通过CSS样式给元素添加

BFC的作用

使盒子本身形成一个独立的渲染区域，且内部元素不会影响到外部元素

BFC的应用场景

BFC的实现场景为清除元素浮动带来的父元素高度塌陷，和盒子外边距重叠问题
高度塌陷：子元素浮动，父元素获取不到子元素的高度
外边距重叠：相邻元素的互相margin宽度会重叠，取最高值

BFC的实现

浮动元素float不为none
绝对定位元素position为abusolute或fixed
块级元素为overflow不为visible
flex元素
illine-block元素

标签
#css
pggcj
关注
详解BFC
Pgm119727的博客
04-12 139
目录1. 简介2. 开发中常遇到的问题3.解决方法BFC：（block formatting context ） => 块级格式化上下文W3C官方对于BFC的介绍：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。默认html元素都是关闭了BFC的，当出现了以下三个问题的时候，就会触发BFC，且用以解决以下问题。2. 开发中常遇到的问题。
web自适应的实现和原理
u014298350的博客
01-25 2183
预读 rem rem作为一个单位是受 html 标签的 font-size 变化而变化的 <html style="font-size:24px;"> <body> <div style="font-size:.5rem;"></div> </body> </html> 因上可得：通过控制 html 的 font-size 来达到一个简单的自适应 实现自适应 在 html 中添加 <meta name="viewport
学习过CSS，那你知道BFC是什么吗？
2401_84447043的博客
05-02 2万+
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
深入学习BFC
weixin_44002432的博客
12-01 256
前言 关于BFC，很多人可能很熟悉，但有些人可能第一次听说。对于熟悉的人无妨也可以温习一下查缺补漏。对于还不是很了解的人认真阅读完后，应该都能够比较深入的理解BFC这个概念、作用以及用法。希望对大家有所收获。 BFC是什么？ BFC全称为 block formatting context，中文为“块级格式化上下文”。它是一个独立的渲染区域,规定了内部如何进行布局，并且内外部的元素之间互不影响。相对...
学习过CSS，那你知道BFC是什么吗？，面试建议
2401_84097820的博客
04-06 904
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-l9hrCJ6c-1712335193238)]
学习BFC
fxz11111的博客
07-08 201
学习BFC(Block Formatting Context) 什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。 视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能
BFC学习
Bekind2010的专栏
02-03 249
BFC全称是Block Formatting Context，块级格式化上下文。在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素简单来说，创建一个BFC，相当于创建一个容器，容器里面元素样式不会影响容器外部样式。
BFC 块级格式上下文的定义、创建、特点和常见用途，学习CSS行内样式
2401_84093973的博客
04-03 889
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。获取！！（备注：前端）**给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。[外链图片转存中…(img-Qz9Q4dSp-1712085141161)][外链图片转存中…(img-Zg6ptjEq-1712085141161)]
学习积累——BFC
qq_40674204的博客
10-14 332
今天在看文章的时候看到了一篇“为什么‘’overflow:hidden"能清除浮动的影响”的文章，作者的理解很到位讲解也很仔细。这篇文章也提到了一个我以前不怎么接触的概念“BFC”。也解决了我之前很多困惑，比如margin合并问题、overflow:hidden能清除浮动等。 BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默...
CSS中的BFC学习
越努力，越幸运！
07-01 1054
块级格式化上下文学习总结
跟着coderwhy学习BFC
Lei190的博客
07-06 853
之前在面试字节的时候，面试官问了我有了解BFC吗，我当时其实有看很多文章，但是总是记不住，感觉每个文章讲的都差不多，然后面试时候也没答出来，但是在听了王红元老师讲解的之后，感觉茅塞顿开，所以想分享给大家。以下内容都是根据王红元老师的前端系统课学习的总结，觉得讲的非常清晰，非常感谢王红元老师............
学习日记——BFC
qq_42660453的博客
11-03 180
BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
BFC的学习理解
2302_76953773的博客
03-17 130
有关bfc知识的学习
学习BFC与IFC
weixin_34085658的博客
04-04 165
简介 理解CSS中的BFC与IFC，使你对CSS布局更加得心应手。 什么是BFC BFC(Block Formatting Context)英文直译：块级格式化上下文。BFC形成一个单独的区块，BFC里面的元素不会影响BFC区块之外的元素或区块，反之，BFC区块之外的元素不会影响BFC内的元素。 BFC的形成 以下元素会形成BFC： float 的值不为 none position 的值不为 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值