BFC：块级格式化上下文（Block Formatting Context,BFC

最新推荐文章于 2024-08-20 18:04:12 发布
最新推荐文章于 2024-08-20 18:04:12 发布
阅读量48 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52687650/article/details/131826686
版权

BFC 默认情况下处于关闭状态，满足某些条件后，开启BFC
参考文章https://blog.csdn.net/weixin_41819731/article/details/88594489

开启后能解决的问题

  1. 解决margin塌陷问题
  2. 自身不会被其他浮动元素覆盖
  3. 就算其子元素浮动，元素自身高度也不会塌陷

开启BFC

  • 根元素
  • 浮动元素
  • 绝对定位，固定定位元素
  • 行内块元素
  • 表格单元格元素
  • overflow的值不为visible的元素
  • 伸缩项目
  • 多列容器
  • column-span为all的元素
  • diaplay：flow-root
钰@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 437
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
块级格式化上下文 Block formatting context （BFC）
monkeyHI
04-12 361
详情地址：块级格式化上下文 Block formatting context （BFC） 1. Box 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。 （1）块盒 当元素的display为block、list-item或ta...
详解BFC：块级格式化上下文
icemwj的博客
10-06 2790
1、什么是BFC以及如何创建BFC （1）BFC 的概念： BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。 （2）W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
块级格式化上下文BFC（Block Formatting Context）
冰的博客
06-23 373
块级格式化上下文（BFC）是WEB页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有BFC特性的元素可以看作是隔离了的独立容器（想象成一个独立的箱子），容器内的元素不会在布局上影响到外面的元素（你里箱子里面的物品如何怎么摆放都不会影响到外面），并且BFC具有普通容器所没有的一些特性，且同一个元素不可能同时存在于两个BFC中。
BFC：Block Formatting Context（块级格式化上下文本）
weixin_52339077的博客
06-16 174
BFC的作用
BFC(Block Formatting Context) 块级格式化上下文
LMX的博客
04-01 100
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）块级格式化上下文
qq_42760049的博客
04-22 276
Formatting Context 在了解BFC之前,首先要了解下Formatting Context。 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context ...
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 768
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3707
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
css布局之BFC模式（block formatting context）
01-19
官方给出的BFC解释是这样的，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能...
浅析CSS里的BFC和IFC的用法
01-19
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 350
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1120
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【IC前端虚拟项目】用例的完善与补充
最新发布
moon9999的博客
08-20 62
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
CORS error && 302 Found
zcxbd的博客
08-19 148
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
vue3 组合式 API：setup()
咸鱼滚滚
08-17 1009
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值