什么是BFC

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

fc：   元素在标准流中都属于一个fc

 bfc用个简单例子来说一下吧：

就像两个div为什么是从左开始的，为什么是垂直排布的，这些都是bfc帮我们实现的，那么在什么情况下会产生bfc呢，参考MDN文档

 margin在同一个bfc中会折叠，反之，让他们不在一个bfc中就能解决这个问题

 二、解决浮动塌陷

bfc解决浮动塌陷要满足两个条件

1.父级形成bfc 

2.父级高度为auto

 

学无止境s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
HTML-bfc初探
08-03
HTML-bfc初探
BFC实现自适应两栏布局
01-20
回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 233
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
netcore 生成验证码
qq_51172697的博客
06-20 213
提供一个生成验证码和校验的接口。
Web前端写随机抽奖：技术与创意的碰撞
yvnmth_025y的博客
06-16 328
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 197
FR：徐海涛(hunkxu)
若以框架学习（3），echarts结合后端数据展示，暂时完结。
最新发布
m0_51798113的博客
06-22 118
前三天，参加毕业典礼，领毕业证，顿时感到空落落的失去感，没有工作，啥也没有，总感觉一辈子白活了。因为数据太多了，有1000条，其实可以限制下不查那么多。由于自己前端技术问题，迟迟不能完成，所以我又网上搜了下。调整了下代码，终于完成了前后端echars数据。前端当初没搞懂，后端就太简单了，返回一个map。修改后的代码如下，大家可以参考下。然后在main.js中配置。自己的界面先用一个案例。导入echartss。//导入echats。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 269
【element 】修改下拉菜单
【React】React 的StrictMode作用是什么，怎么使用？
读心悦
06-17 182
React的是一个用于在开发环境中检测潜在问题的工具，它可以帮助开发者在开发阶段识别并解决一些常见的编码问题，从而提高代码质量和应用的可靠性。以下是。
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理
inksnowHL的博客
06-20 204
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理。
React.FC`＜ChildComponentProps＞`解释
weixin_63681863的博客
06-18 517
通过使用进行类型注解，你可以确保组件的 props 类型安全，并享受更好的开发体验，包括智能提示和自动补全。这种类型注解在团队合作和大型项目中尤其重要，因为它可以显著减少由于类型错误引起的 bug。
vue格网图
南北粉面馆
06-16 337
【代码】vue格网图。
vue3 中传递 fromData 格式的写法
阿乐的博客
06-19 214
在我们前端调用接口的使用中 我们会传递参数 大部分是json 格式的 但是有的时候 回事 formData 的格式的 那我们前端就需要修改一下 传递对应的东西。如果不传递 paramsFormdata 就默认是json 传就是formData 的格式的。我说一下我使用Taro 框架中的写法 就是移动端 和小程序中的写法。我这里有一个判断 当我需要传递这个 formData 的格式的时候。我说一下在web端中的使用 我使用的是tdesign 的框架。人家封装好的request 的文件我就不写了。
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 977
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
【第17章】Vue实战篇之注册界面
zjg
06-18 850
注册界面搭建数据绑定表单校验调用后端接口//用于注册的数据模型})//自定义确认密码的校验函数callback(new Error('请再次确认密码'))callback(new Error('两次输入密码不一致'))} else {callback()//用于注册的表单校验模型{ required: true, message: '请输入用户名', trigger: 'blur' },
react-day1
Jason_yuxuan的博客
06-16 276
react是由Meta公司开发，是一个用于构建web和原生交互界面的库。1.入口文件：index.js。2.根组件：App.js。
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学无止境s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值