浅谈BFC

最新推荐文章于 2025-10-29 15:30:30 发布
原创 最新推荐文章于 2025-10-29 15:30:30 发布 · 389 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍了块格式上下文(BFC)的概念，包括如何创建BFC、BFC的特点及其应用场景，如清除浮动和解决margin塌陷等问题。

一、什么是BFC

块格式上下文（Block Formatting Context）BFC。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

二、如何创建一个BFC?

  1. html是BFC盒子

  2. 浮动元素是BFC盒子

  3. 行内块元素也是BFC盒子

  4. overflow取值不为visible的值 如:auto hidden

  5. ......

三、BFC的特点

  1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动

  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

  3. ......

Bian_Zhuang
关注
前端教程：一分钟带你揭开BFC神秘的面纱
黑马程序员官方博客
09-15 627
1. 引言 在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所帮助。 2
浅谈CSS潜藏着的BFC
09-24
BFC（Block Formatting Context）是CSS中的一个重要的概念，它是Web页面的可视CSS渲染的一部分，用于决定块级盒子的布局及相互作用。在写CSS样式时，为了达到期望的效果，经常会添加或修改样式属性，而在这个过程中...
BFC 到底是个啥？有何神通广大之处？这篇文章带你进入 BFC 的世界
qq_35727582的博客
04-26 4355
在实际开发过程中其实我们不经意间就用到了BFC这一利器解决了我们的问题，一起学习如何使用BFC实现我们想要的效果吧！
什么是BFC，他有什么用？
热门推荐
sqLeiQ的博客
06-13 3万+
BFC 是什么？
BFC详解：揭秘CSS布局的神器
最新发布
OG25_的博客
10-29 926
BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一种布局机制。它决定了元素如何在页面上进行定位、布局以及与周围元素的相互影响。可以把 BFC 理解为一个独立的“环境”或“隔离空间”，在这个空间中的元素不会影响外部的布局，外部的布局也不会影响其中的元素。BFC 是 CSS 中重要的布局概念。它定义了一个独立的渲染区域，使其中的元素在垂直方向上的排列、浮动的包裹与外部的交互行为都受其独立控制。
谈一谈自己对BFC的理解
titoni_yunruohan的博客
01-08 350
一、BFC概念 BFC全名为块级格式化上下文，它是一个独立的渲染区域，其内部的盒子如何布局只遵循块级格式化上下文的规则，不受外部元素的干扰 二、如何定义BFC 当前元素的float属性不为none 当前元素的position属性不为static和relative 当前元素的overflow属性不为visible 当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex 三、BFC的布局规则 每个盒子都占一行，在垂
我的世界之BFC
YouZi_X的博客
07-15 2642
BFC的规则、使用，使用BFC清除浮动，文字环绕，margin塌陷等问题
浅谈CSS 高度塌陷问题
12-30
表现 例如： HTML： <div class=first-child1>first-child1 <div class=first-child2>first-child2 second third CSS： .first{ width: 300px; background-color: pink;....first .first-child1,.f
浅谈CSS中的clear清除浮动
09-24
在CSS中清除浮动是前端开发工作中的一项基本技能。浮动可以使得元素脱离正常的文档流，从而实现文本环绕等布局效果，但浮动...通过本篇浅谈，希望大家能够对清除浮动有一个基本的认识和理解，并在实际开发中灵活应用。
浅谈tensorflow之内存暴涨问题
12-20
6. 使用TensorFlow的内存管理工具，如BFC（Best Fit with Coalescing）算法，它可以帮助更有效地管理内存资源。 总的来说，理解TensorFlow的工作原理并合理利用其特性，结合有效的内存管理策略，可以帮助我们避免...
BFC:什么是BFC？BFC作用？如何创建BFC？BFC应用场景
m0_74114605的博客
03-23 5280
BFC属于普通流。BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 8218
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
什么是BFC
m0_74899618的博客
02-22 1073
<!-- 什么是BFC BFC（block fomatting context）是web页面中盒模型布局的css渲染模式---“块级格式化上下文”，它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外毫不相干。 生成BFC的条件 1、根元素 2、overflow属性值不为visible；
BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！
SmileLife123的博客
02-21 5047
BFC（Block Formatting Context）中文译为"块级格式化上下文"，简单来说，BFC就是给盒子加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面物品的摆放是不受外部影响。
什么是BFC？
Code6E的博客
03-31 2034
面试题——什么是BFC
了解什么是bfc（前端面试）
2201_75866478的博客
10-31 2074
你会怎么说？很多人会告诉你，bfc就是块级格式化上下文，那么这到底是什么意呢?bfc的全称是Block Format Content，直译为块级格式化上下文，它是一个独立的渲染区域，也就是说，触发bfc的元素会形成一个独立的渲染区域，这个区域里面的元素（包括他自己）不会影响外部元素的渲染，
一篇带你认识BFC！！
qq_74114417的博客
10-19 1556
BFC的全称为Block formatting Context，意思是块级格式化上下文。是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。可以理解为是一个元素的属性，当开启这个属性后，这个元素就可以看作是被隔离的独立容器，容器里面的元素不会影响到外面的元素。
BFC是什么？
qq_43474235的博客
05-26 1193
BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。详见MDN看不明白？那就对了！官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）还是让逆战在新冠疫情期的我来给你解答吧！1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
什么是BFC？BFC的形成条件？BFC的应用场景
qq_52822043的博客
09-15 2465
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
深入浅出HTML-bfc的基本概念和应用
- 利用BFC进行布局优化：比如制作一个列布局，可以为每列创建一个BFC，以避免列与列之间的相互影响。 - 清除内部元素浮动：在外层容器中创建BFC，使得内部的浮动元素也参与容器的高度计算。 - 实现自适应两列布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值