什么BFC?它解决了什么问题？

最新推荐文章于 2024-08-31 23:38:40 发布
最新推荐文章于 2024-08-31 23:38:40 发布
阅读量248 收藏
点赞数
分类专栏： 前端面试 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dexing07/article/details/128855594
版权
BFC（BlockFormattingContext）是CSS布局中的重要概念，它定义了块级元素如何在内部布局以及与外部元素交互。主要解决了浮动元素导致的文档流破坏和元素被覆盖的问题，通过设置如`overflow:hidden`可创建BFC，防止内部元素影响外部布局，并能避免外边距折叠。掌握BFC对于优化页面布局具有重要意义。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

BFC 全程： 快格式化上下文

简单理解：BFC 就是CSS 的块级作用域，让块空间里面的元素不会影响外部的布局

BFC 解决了什么问题：

  • BFC 可以清除浮动，解决float 脱离文档流

  • BFC 可以阻止元素被浮动元素覆盖,实现两边布局，块级元素使用overlfow: hidden 避免覆盖

  • BFC 同一个下外边距会发生折叠

前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
鱼头的Web海洋
07-23 2117
作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. CSS盒模型描...
前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)
qq_52287721的博客
12-29 652
BFC 文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么？ 首先要介绍一下关于文档流相关的知识。 文档流分为三个部分： 普通流； 定位流； 浮动流； 这三种流在布局的时候会相互影响，进而产生一些问题。 这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。 BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF
诱发BFC的原因及处理方案
01-07
该文档涉及诱发BFC的原因及处理方案.
BFC的理解以及解决的问题
weixin_43213962的博客
05-06 991
BFC Block Formatting Context 块级格式化上下文 Formatting Context 指的是页面中的一个渲染区域，并且拥有一套渲染规则，他决定子标签如何定位，以及与其他标签的相互关系和作用 BFC，块级格式化上下文，指的是页面中的一个渲染区域，只有Block-level Box（块级盒子）参与，该区域中拥有一套渲染规则来约束块级盒子的布局，且与外部无关 ...
什么是BFC？BFC可以解决什么问题
06-16 9703
一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi
浅谈对BFC的认识，以及用bfc解决浮动问题
weixin_30505043的博客
06-28 163
我们在前端的学习过程中常常会遇到BFC，用BFC来解决一些margin塌陷、margin合并清理浮动流的问题 那么问题来了，我们所说的BFC到底是个什么东西呢； 什么是BFC 　　BFC（Block Formatting Context）即“块级格式化上下文。我来简单的解读一下： 　　　　1.块级对应单词Block，不难想到的就是display中block属性，block属性是将此元素作为...
margin Bug及其bfc解决方案
qq_43618136的博客
11-10 130
margin Bug margin 塌陷 父子嵌套的垂直方向上的margin取最大值 margin 合并 兄弟元素的垂直方向上的margin取两元素的margin值之和 解决方案 触发bfc 什么是bfc？ block format context 块级格式化上下文 每一个元素都有一套属于自己的渲染逻辑，如同细胞中的DNA bfc的设定能够让特定的盒子/元素有拥有自己的渲染逻辑或者说是不一样的渲染...
什么是BFC？如何解决垂直外边距重叠与高度塌陷？看这一篇就够了
tzw14030140049的博客
04-17 716
一、概念 BFC：块级格式上下文 注意：针对块级元素有效，内联元素参考IFC(行级格式上下文) MDN中的解释： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 创建方式： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具...
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1452
BFC是什么？如何触发？两栏/三栏布局如何实现？
前端面试——什么是BFC？
xt_123456的博客
05-09 2681
BFC是块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 具有 BFC 特性的元素可以看作是一个被隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把BFC看作是一个独立的容器，容器里的元素无论怎么动，都不会影响到容器外部的布局。 只要元素满足以下任意一个条件就可以触发 BFC 特性： 1）设置浮动元素float值（除none以外的值） 2）绝对定位元素（position为absolute或fixed） 3）displ
什么是BFC，BFC解决哪些问题
weixin_45283069的博客
11-19 939
什么是BFC，BFC解决哪些问题
面试必备：掌握BFC解决布局问题的核心要点
weixin_63625059的博客
08-31 1441
FC–Formatting Context 格式上下文在w3c上说context.context.正常流中的框属于格式设置上下文，该上下文可以是块或内联，但不能同时是两者。块级框参与块格式化上下文。内联级框参与内联格式上下文。
BFC
NewWent的博客
01-22 968
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 下列方式会创建块格式化上下文： 根元素或包含根元素的元素 浮动元素（元素的float不是none） 绝对定位元素（元素的position为absolute或fixed） 行内块元素（元素...
详解什么是BFC和BFC能解决什么问题
web全栈开发的博客
02-20 441
BFC(Block formatting content),中文的翻译是:块级格式化上下文。W3C官方对于BFC的介绍：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单解释一下：你可以把BFC理解为一种属性，一种类似于box-sizing的可...
什么是BFC？如何使用BFC解决父元素塌陷和外边距重叠的问题？
ICanWin_lll的博客
10-20 545
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。官方的描述有点抽象，其实可以把BFC理解成就是css的块级作用域。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
前端教程：一分钟带你揭开BFC神秘的面纱
黑马程序员官方博客
09-15 591
1. 引言 在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所帮助。 2
【CSS】什么是BFC？BFC有什么作用？
m0_61049675的博客
02-05 5729
BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。：只需要把两个div放置不同BFC中，那这两个BFC的内容将不会互相干扰，将两个di分别放置container容器中，然后通过overflow:hidden触发BFC;：这是因为给子元素添加了浮动，使它脱离了文档流；：红色方框覆盖蓝色方块；
块级作用域（选项卡案例）
qq_52291147的博客
04-03 121
JS块级作用域
css作用域
weixin_44430488的博客
05-05 387
提示：这里可以添加本文要记录的大概内容：Scoped CSS与CSS Module是两大解决CSS中不存在模块化缺陷的有效手段提示：以下是本篇文章正文内容，下面案例可供参考CSS Module通过将class名称做编码转换的方式来保证唯一性，从而避免样式冲突（其根本就是为了保证不会发生同名即使同名也不会造成冲突）使用的是另一种解决方案 —— 在HTML标签上做文章直接上代码.examplecolor;</</</
什么是BFC，如何触发？
最新发布
03-08
它决定了内部元素的排列规则，且 **BFC 内外的布局互不干扰**，可以解决一些常见的布局问题。 --- ### 二、BFC 的核心作用 1. **阻止外边距重叠**（Margin Collapse） 两个相邻元素的垂直外边距会合并，BFC 可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿冰介

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值