在前端CSS体系中，页面上所有元素都以矩形盒子完成渲染。盒模型规定盒子尺寸如何计算，而BFC(块级格式化上下文)是浏览器内部一套独立布局规则。
绝大多数布局疑难：外边距合并、浮动高度塌陷、元素互相遮挡，本质都来自对盒模型与BFC理解不到位。很多开发者靠反复调试修改数值解决bug，读懂底层渲染逻辑，就可以从根源定位布局问题。
一、盒模型：每一个标签都是矩形盒子
浏览器渲染任意HTML标签，都会生成矩形盒子，盒子由四层区域构成：
-
content（内容区）：存放文字、图片，width、height控制该区域大小
-
padding（内边距）：内容与边框之间的距离，会向外撑大盒子整体尺寸
-
border（边框）：盒子的边框线条，同样占用盒子空间
-
margin（外边距）：盒子与其他盒子之间的间距，不会改变盒子自身大小
两种盒模型模式
/* 默认：标准盒模型 content‑box */ box-sizing: content-box; /* 开发常用：边框盒 border‑box */ box-sizing: border-box;
content‑box：设置的width仅代表内容区域宽度。padding、border会额外增加盒子总宽。
border‑box：width直接包含 content + padding + border。修改内边距、边框，盒子整体宽高不会变大。业务项目几乎全部使用该模式。
项目全局通用初始化：
* { margin: 0; padding: 0; box-sizing: border-box; }
margin垂直外边距塌陷
只有垂直方向块级元素会出现margin塌陷，水平方向不会发生。两个margin相遇不会相加，而是取两者中更大的值作为最终间距。
塌陷分为两种场景：
-
兄弟塌陷：上下相邻两个块元素，垂直margin合并
-
父子塌陷：父容器没有边框、内边距，子元素的margin‑top会穿透父盒子
二、BFC 块级格式化上下文
BFC是浏览器一块独立隔离的渲染区域。BFC容器内部的布局不会影响外部元素，外部也不会干扰内部。它就是一套隔离屏障。
满足任意条件即可触发BFC
-
float属性不为none
-
overflow取值为 hidden、auto、scroll
-
display设置 inline‑block、flex、grid
-
position设置 absolute、fixed
BFC三大核心能力
1、包裹浮动元素，解决父盒子高度塌陷
子元素设置浮动之后脱离文档流，父盒子识别不到子元素高度，高度变为0。父容器触发BFC，就可以把浮动子元素高度计算进去。
2、阻止垂直margin塌陷
把子元素放到BFC容器内，可以隔绝父子、兄弟之间外边距合并问题。
3、不会被浮动元素覆盖，实现自适应两栏布局
旁边存在浮动盒子，普通元素会被浮动覆盖；元素开启BFC之后，会自动避开浮动区域，完成侧边栏+内容区经典布局。
三、浮动与清除浮动完整方案
float浮动最初设计目标，用来实现文字环绕图片。浮动元素脱离普通文档流，可以让多个块级元素横向并排，同时带来副作用：父容器高度塌陷。
主流清除浮动方案对比
方案1：父元素 overflow:hidden，触发BFC，写法极简；缺点：溢出内容会被裁剪。
方案2：伪元素clearfix，企业项目最常用，无副作用
.clearfix::after { content: ""; display: block; clear: both; }
方案3：增加空标签 <div style="clear:both"></div>，不推荐，污染HTML结构。
四、实战问题排查思路
-
盒子尺寸莫名变大 → 检查box‑sizing盒模型，padding、border是否撑开盒子
-
上下间距不符合预期 → 排查是否发生margin垂直塌陷
-
父盒子高度丢失 → 子元素浮动，给父容器触发BFC清除浮动
-
内容被旁边浮动块压住 → 将内容容器开启BFC实现避让
写在最后
盒模型定义元素怎么算大小，BFC定义浏览器怎么排版一块区域。
很多人写CSS只会不断修改像素数值碰运气调试布局。理解盒模型和BFC，遇到布局异常可以直接定位根本原因，而不是盲目试错。这是从会写样式，走向理解CSS底层的必经关卡。
