当前位置: 首页 > news >正文

Margin 塌陷问题如何解决?触发BFC。BFC的概念和触发条件

1️⃣ 什么是 Margin 塌陷

【现象】

  两个垂直方向相邻的块级盒子(兄弟或父子)之间的margin 会合并为其中的最大值,而不是两者相加。
【影响】

  兄弟元素:上下margin合并为其中的最大值
  父子元素:如果父元素没有padding 或 border,子元素的 margin-top会 透过 父元素与父元素的 margin-top合并

2️⃣ BFC(Block Formatting Context)是什么

【定义】

  1、BFC 是一个独立渲染区域,创建BFC的元素 内部的布局规则与外部隔离

  2、内部元素的margin 不会与 BFC外部 的 margin发生塌陷

  3、BFC区域不会与浮动元素重叠,会包裹内部浮动

  4、BFC的计算高度包含浮动子元素

 

3️⃣ 如何触发 BFC

触发属性示例
overflowvisible overflow:hidden / auto / scroll
display 特殊值 display: flow-root(推荐现代方案)、inline-blocktable-cell
浮动 float: left/right
定位 position: absolute / fixed
弹性/网格布局 display: flex / grid

 

4️⃣ 常见解决 Margin 塌陷的方法

方法代码示例原理
父元素创建 BFC overflow:hidden; / display: flow-root; BFC 内外 margin 不会塌陷
父元素加 padding 或 border padding-top:1px; / border-top:1px solid transparent; 子元素的 margin-top 不会透过 padding/border
浮动父元素 float:left; 浮动元素自动形成 BFC
flex/grid 布局 display:flex; Flex 容器是 BFC
伪元素清除 ::before { content:""; display:table; } display:table 也创建 BFC

 

5️⃣ BFC 除了解决 margin 塌陷还有什么作用?

  1、包含内部浮动元素(清除浮动)

  2、阻止文字环绕浮动

  3、隔离外部布局,防止浮动\外边距影响

 

http://www.hskmm.com/?act=detail&tid=13626

相关文章:

  • 9.22
  • 数字统计
  • 火速收藏!2025 云栖大会 AI 中间件议程看点全公开(附免费报名通道)
  • 第二次软工作业——个人项目 - LXJ
  • WinForm引入项目资源文件
  • 第二次作业
  • 训练集,验证集,测试集
  • Android 项目:画图白板APP开发(六)——分页展示 - 教程
  • ESP32 读取旋转编码器
  • mysql/oracle LEFT JOIN 取时间最大的数据
  • 6月6日证书 - 工信部人才交流中心PostgreSQL中级PGCP高级PGCM认证
  • 基于遗传算法与非线性规划的混合优化算法在电力系统最优潮流中的实现
  • 【下一款产品】
  • 数1的个数
  • 通过ML.Net调用Yolov5的Onnx模型
  • Java-如何在Eclipse开发-数组
  • 常用数据生成器
  • 基于RSSI修正的定位算法分析
  • c# 反射动态添加Attribute
  • MyBatis-Plus 全方位深度指南:从入门到精通
  • 鸿蒙项目实战(十):web和js交互
  • 【9.24 直播】集群数据管理实战:时序数据库 IoTDB 数据分区、同步与备份详解
  • 函数计算进化之路:AI 应用运行时的状态剖析
  • 01_进程与线程
  • 第六届医学人工智能国际学术会议(ISAIMS 2025)
  • redis 6.0 多线程
  • docker 常用命令与端口映射
  • linux重启mysql服务,几种常见的方法
  • opencv学习记录3
  • 统计分析神器 NCSS 2025 功能亮点+图文安装教程