【html中的BFC是什么】

BFC(块级格式化上下文)是 CSS 中的一种盒模型布局,是指一个独立的块级容器,容器内部的元素会按照一定规则进行布局。

BFC 具体的规则有以下几个:

  1. BFC 内部的元素在垂直方向上相互排列,不会出现浮动的情况。

  2. 每个 BFC 都是一个独立的容器,容器内部的元素不会影响到外部的元素。即 BFC 具有隔离作用。

  3. BFC 的边界不会和浮动元素重叠,而是会将浮动元素包裹在内部。

  4. BFC 内的块元素会按照顺序一个接一个地放置。

  5. BFC 具有一定的自适应能力,当容器高度不够时,容器会自适应地缩小高度,从而避免出现溢出的情况。

应用场景:

  1. 清除浮动:在父元素设置 BFC,从而避免浮动元素对其它元素的影响。

  2. 避免外边距的合并:当两个相邻的块框的 margin-top 和 margin-bottom 相遇时,会合并为一个 margin,通过在两个块框之间插入一个拥有 BFC 属性的元素,可以避免合并的情况。

  3. 实现多列布局:例如通过设置 column-count 属性,将内容分成多个列进行布局。

相关推荐
@PHARAOH10 分钟前
HOW - 依赖包版本 lock 维护策略(pnpm)
前端
SuperEugene12 分钟前
前端-后端-产品-项目-运维:互联网项目协作全流程解析
运维·前端·javascript
weixin1997010801613 分钟前
网易考拉商品详情页前端性能优化实战
java·前端·python·性能优化
A黄俊辉A16 分钟前
openlayers+vue初学注意点
前端·javascript·vue.js
南篱20 分钟前
从回调地狱到优雅异步:JavaScript 异步编程的完整演进之路
前端·javascript·面试
陆枫Larry23 分钟前
折叠屏“窗口化”导致的背景图错位:一次小程序样式问题的排查与修复
前端
米丘25 分钟前
vue 3.x 关于 provide 与 inject 实现原理
前端
进击的雷神25 分钟前
无分页一次性加载、多级CSS类名定位、动态User-Agent轮换、断点本地备份——意大利塑料展爬虫四大技术难关攻克纪实
前端·css·爬虫·python
天才熊猫君26 分钟前
Vue 3 v-for key 原理核心笔记
前端
zhedream26 分钟前
环境监测 CMMS 的表单 DSL 实践:从逐一开发到声明式生成,工单交付效率提升 10 倍
前端