【前端面试必读】BFC (Block formatting context) “块级格式化上下文”

最新推荐文章于 2024-07-06 16:26:01 发布
最新推荐文章于 2024-07-06 16:26:01 发布
阅读量221 收藏
点赞数
分类专栏： 面试 文章标签： 前端 面试 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_soulmate/article/details/122669143
版权

怎样触发：

满足下列条件之一就可触发BFC
　　【1】根元素，即HTML元素
　　【2】float的值不为none
　　【3】overflow的值不为visible
　　【4】display的值为inline-block、table-cell、table-caption
　　【5】position的值为absolute或fixed

有何特性：

1、阻止垂直外边距（margin-top、margin-bottom）折叠
2、清除浮动，解决文字环绕，高度塌陷

爱焰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS理解块级格式上下文（BFC）
09-24
BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理解块级格式上下文（BFC）的相关知识，感兴趣的朋友...
关于BFC块级格式化上下文原理及触发条件
u013158011的博客
04-01 707
    这里首先就是了解什么是BFC了，。    经常听到大神说什么清除浮动的原理之类的，什么BFC、FFC、IFC之类的。    如果说上面三个词你一个也不懂，甚至都没听过，那就要好好关注我的博客了，之后会持续更新的。    先来看看BFC是什么？    BFC英文名字全称Block Formatting Context。    关于全称这个东西，了解一下就可以了，但是看到要知道是什么，别一说到...
块级格式化上下文 (block formatting contexts) 触发条件探讨
前端开发和UED
03-05 255
  Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。   在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 'margin' 特性。在...
css布局之BFC模式（block formatting context）
09-24
主要介绍了css布局之BFC模式（block formatting context），通过BFC盒子的一些特性和应用场景解释了BFC模式，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
如何理解 CSS 布局和块级格式上下文
09-27
CSS布局和块级格式上下文（Block Formatting Context，简称BFC）是理解CSS布局机制的关键概念。BFC是一个独立的布局环境，它有自己的渲染规则，能够决定内部元素如何排列以及与外部元素如何交互。在CSS中，BFC主要...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1035
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 803
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 535
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1301
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 198
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
前端利用vue如何实现导入和导出功能.md
BradenHan的专栏
07-02 1029
xlsx/TOC。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1216
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 264
【代码】react自定义hooks---useCounter。
ESP32-Web-Server编程- 使用 mDNS 建立域名系统
wangyx1234的博客
07-02 224
1）本节首先介绍了 DNS 域名服务系统，然后引出了 mDNS（multicast DNS，组播 DNS）系统的基本原理。 2）在 ESP32 Web Server 系统中部署 mDNS 服务，并演示了通过建立的域名访问 Web 服务器的方法。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1025
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 54
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
黑马点评学习过程汇总——Cookie \ Session \ Token的区别
weixin_45791946的博客
07-02 365
在后续的请求中，前端发往后端的请求中都携带token，后端拿到token后进行jwt的解密并验证signature，如果检验成功信息没有被篡改，就会放行。，自动存储session信息到cookie中。Token不依赖于session和cookie，对集群和前后端分离架构友好。前端发起登录请求到后端，后端对前端携带来的信息进行认证，认证成功后会生成。我们往session中存储用户信息，服务器端保存session并通过。头部，Payload负载，Signature签名 ）并以。（4）Session的弊端。
JS混淆基本类型和原理
最新发布
朴拙科技的博客
07-06 400
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 文件下载
猫脸码客的博客
07-03 220
【代码】Vue 文件下载。
前端面试复习篇前端面试复习篇
06-06
2. **BFC（块级格式化上下文）**： BFC是一个独立的渲染区域，有助于控制元素间的间距和布局。它有以下特点： - IE下通过设置`zoom:1`可触发BFC。 - 触发条件包括根元素、绝对定位、`inline-block`、`table`、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值