BFC 块格式化上下文 (Block Formatting Context)

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

#css #html #前端

本文介绍了BFC（Block Formatting Context）的概念及其生成方式，并探讨了如何利用BFC解决垂直外边距重叠、去除浮动及实现自适应两列布局等问题。

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品，使 BFC 内部的浮动元素不会到处乱跑。和浮动元素产生边界

没有产生 BFC效果

产生BFC效果

 

   通过以下几种方法就能生成一个BCF

  • float 的值不是 none
  • position 的值不是static或者relative。
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow 的值不是 visible

BFC可以解决什么问题

  • 垂直外边距重叠问题
  • 去除浮动
  • 自适用两列布局

对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 663
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
一文大白话讲清楚块级格式化上下文（BFC,Block Formatting Context）原理和应用
xiaobangkeji的博客
12-30 1171
一文大白话讲清楚块级格式化上下文（BFC,Block Formatting Context）原理和应用
块级格式化上下文 Block formatting context （BFC）
monkeyHI
04-12 442
详情地址：块级格式化上下文 Block formatting context （BFC） 1. Box 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。 （1）块盒 当元素的display为block、list-item或ta...
块级格式化上下文BFC（Block Formatting Context）
冰的博客
06-23 481
块级格式化上下文（BFC）是WEB页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有BFC特性的元素可以看作是隔离了的独立容器（想象成一个独立的箱子），容器内的元素不会在布局上影响到外面的元素（你里箱子里面的物品如何怎么摆放都不会影响到外面），并且BFC具有普通容器所没有的一些特性，且同一个元素不可能同时存在于两个BFC中。
BFC（Block Formatting Context，块格式化上下文）
Lycoris_Red的博客
05-07 293
BFC是什么？BFC有什么用？看完全明白 一、BFC是什么？ 官方定义 BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 详见MDN 看不明白？那就对了！ 官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽） 还是让逆战在新冠疫情期的我来给你解答吧！ 个人理解 1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响； 2、可以通过一些条件触发BF
BFC（Block Formatting Context）块级格式化上下文
qq_42760049的博客
04-22 351
Formatting Context 在了解BFC之前,首先要了解下Formatting Context。 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context ...
BFC(Block Formatting Context) 块级格式化上下文
LMX的博客
04-01 157
BFC(Block Formatting Context) 块级格式化上下文 BFC就好像标签的一个属性，可以使一个区域具有独立渲染不影响其他区域的特性。 BFC常用的几个方式 float属性不为none overflow属性不为visible position属性为absolute或fixed display属性为inline-block contain值为layout、content、或paint 多列容器 BFC的用处 避免外边距重叠 清除浮动 阻止元素被浮动元素覆盖 ...
BFC-块格式化上下文（block formatting context）
weixin_34259159的博客
07-25 112
BFC概念 BFC（block formatting context）块格式化上下文， 是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境，（实际页面渲染时是不可见的），由BFC构建的区域其内部元素的布局是不受外界的影响的，利用这个特性可用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。在BFC中元素从顶...
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 435
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 952
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定...在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
css样式用flex 布局的时候元素尺寸展示不对
Youyzq的博客
12-12 384
摘要：当Flex布局中父元素宽度不足时，子元素默认会因flex-shrink:1而自动收缩。本文通过案例说明如何通过设置flex-shrink:0或使用flex:0 0 164px简写来固定子元素宽度，避免被压缩。同时简要介绍了flex布局的三大核心属性（flex-grow、flex-shrink、flex-basis）及其作用，帮助开发者精准控制Flex子元素尺寸。（148字）
CSS 网格布局（Grid Layout）核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
只会写bug
12-15 827
CSS网格布局(Grid Layout)是一种强大的二维布局系统，相比弹性布局更适合复杂页面设计。核心概念包括网格容器、网格项、网格轨道等。基础使用需定义网格容器(display:grid)，通过grid-template-columns/rows设置行列尺寸，支持px、fr、repeat()等单位。关键属性分为容器属性(如gap、grid-template-areas)和项目属性(如grid-column、grid-area)。实战中可实现3列自适应网格或经典页面布局(grid-template-area
Tailwind CSS 自适应相关
最新发布
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
12-15 610
Tailwind CSS本身不会自动实现自适应布局，而是通过响应式工具类（如sm:/md:/lg:前缀）让开发者手动控制不同屏幕尺寸的样式。实现自适应的关键有两点：1）主动使用断点前缀配置响应式样式，遵循移动优先原则；2）结合相对单位（w-full/fr）和弹性/网格布局。若仅使用固定像素类名，布局不会自适应。正确做法是：小屏默认样式+大屏断点覆盖，配合Flex/Grid布局的自动换行和空间分配特性，才能实现真正的响应式效果。
999+套计算机毕业设计——基于HTML5+CSS的图书馆借阅管理系统的设计与实现（含源码+部署教程+数据库）
2501_94164441的博客
12-07 1141
随着互联网大趋势的到来，社会的方方面面，各行各业都在考虑利用互联网作为媒介将自己的信息及时有效地推广出去，而其中最好的方式就是建立网络管理系统，并对其进行信息管理。本文旨在设计和实现基于SSM框架和HTML技术的图书馆借阅管理系统。
如何使用CSS Grid？
2501_94498451的博客
12-12 289
grid-template-columns ：定义列数和列宽（核心），例如 grid-template-columns: 100px 1fr 2fr 表示“1列固定100px，1列占1份，1列占2份”。- grid-column ：控制项目占几列，例如 grid-column: 1 / 3 表示“从第1列开始，到第3列结束（占2列）”。- grid-row ：控制项目占几行，例如 grid-row: 2 / 4 表示“从第2行开始，到第4行结束（占2行）”。/* 3等宽列 */
如何使用 CSS Grid 实现响应式布局？
只会写bug
12-15 621
CSS Grid 实现响应式布局的核心在于灵活运用 auto-fill/auto-fit 和 minmax() 实现自适应列数，结合媒体查询精准控制布局。通过 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 可实现无断点卡片网格；使用 @media 和 grid-template-areas 可创建移动端堆叠、桌面端分栏的页面结构。Grid 布局比 Flex 更适合复杂响应式页面，代码简洁且可控性强，现代浏览器支持良好，无需兼容旧语法
CSS Border(边框)
lly202406的博客
12-14 297
本文详细介绍了CSS边框的相关知识，包括边框样式、宽度、颜色、圆角等属性。通过掌握这些知识，开发者可以更好地控制网页元素的边框样式，从而提升网页的视觉效果。希望本文对您有所帮助。
深入理解前端文档流与块格式化上下文BFC
BFC，即块级格式化上下文，是一个独立的渲染区域，使得处于该区域的元素布局不受外界影响。BFC可以解决一些文档流带来的布局问题，如清除浮动、防止文字环绕浮动元素等。 二、文档流的特性与应用 1. 块级元素与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值