BFC块级格式化上下文

已于 2023-04-15 00:47:19 修改
阅读量221 收藏
点赞数 2
分类专栏： HTML/CSS 文章标签： html css html5 css3 前端
于 2020-08-19 15:38:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44790595/article/details/108101955
版权

块级格式化上下文

全称Block Formatting Context，简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局

在这里插入图片描述
BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
根元素
浮动和绝对定位元素
overflow值不等于默认值(visible)的块盒

在这里插入图片描述
不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响外部
具体规则：

在这里插入图片描述

哈木克
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS > 译文：理解CSS中的块级格式化上下文
weixin_33911824的博客
08-09 149
CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Translator: HaoyCn D...
前端面试题-BFC(块格式化上下文)
qq_27009517的博客
02-02 356
一、BFC 的概念 1.规范解释 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 2.通俗理解 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。 浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所
了解前端中的BFC(块级格式化上下文)
qq_51076105的博客
04-11 319
BFC(块级格式化上下文) 什么是BFC 指的是一个块级渲染作用域,该区域内拥有一套完整的规则来约束块级盒子的布局,且与区域外部无关. 为什么要使用BFC 当一个盒子不设置高度,当其中的子元素都浮动时,这个盒子便无法撑起自身. 这个问题可以使用BFC来解决,形成一个块级格式化上下文. 那么如何创建BFC float的值不为none position的值不为static或relative display的值为inline-block,flex,inline-flex 设置overflo
[翻译] 理解 CSS 布局和块级格式上下文
weixin_34087503的博客
12-14 124
注：本文首发于个人博客 www.ferecord.com/understandi…，如若转载请注明来源。 前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context，内容足...
【前端学习之HTML&CSS进阶篇】-- CSS第二篇 -- 块级格式化上下文与堆叠上下文
lc1852109的博客
04-18 480
本节内容主要是块级格式化上下文的生成和计算规则以及堆叠上下文的应用，对于BFC区域原理的掌握是实现自己想要样式的必备之课，而Z-index的内容也是十分重要的关键样式之一。
BFC 块级格式化上下文
汤姆猫的博客
05-15 466
BFC（块级格式化上下文）是CSS中重要的概念之一，它可以影响到元素布局和渲染。在本文中，我们将深入探讨BFC的相关知识，包括什么是BFC、BFC的触发条件、BFC的作用以及如何利用BFC解决一些常见的布局问题等。BFC全称为“块级格式化上下文”，它是一个独立的渲染区域，主要用于控制块元素的布局和浮动元素的影响。每个BFC都有自己的渲染规则，不会受到外部影响，并且内部元素也不会影响到外部元素。在上面的代码中，将容器元素设置为BFC，使用overflow属性来触发BFC。二、BFC的触发条件。
【CSS】BFC 块级格式化上下文
小秀的博客
10-22 583
可以通俗的理解为 BFC 就是一个功能，创建了 BFC 就相当于开启了这个功能。元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。元素开启 BFC 后，自己不会被其他浮动元素所覆盖。元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。根元素浮动元素绝对定位、固定定位的元素行内块元素表格单元格： table、thead、tbody、tfoot、th、td、tr、captionoverflow 的值不为 visible 的块元素（相对来说影响小些）
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先...
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
浅析CSS里的BFC和IFC的用法
01-19
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
2301_78945238的博客
08-14 1122
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
最新发布
2301_78945238的博客
08-15 306
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 599
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
JS（三）——更改html内数据
初叙
08-15 192
JavaScript更改html内数据
html+css+js网页制作 自定义电商10个页面
qq_42431718的博客
08-13 278
html+css+js网页制作 自定义电商10个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 413
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
html+css 实现hover 边框彩色按钮
宝码香车的博客
08-14 813
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
深入理解前端面试关键：BFC块级格式化上下文
"前端大厂最新面试题-BFC" 在前端开发中，Block Formatting Context (BFC) 是一个至关重要的概念，它涉及到网页布局和样式计算。BFC 是页面渲染时的一个独立区域，其中的元素按照特定规则进行排列，而这些规则与...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值