在CSS的视觉格式化模型中，每个元素都会被表示为一个矩形盒子，这就是盒模型的基本概念。而BFC全称为块级格式化上下文，是页面中一块独立的渲染区域，内部的元素渲染不会影响到外部元素，两者共同决定了网页布局的基础规则。
盒模型的两种类型
盒模型由内容区、内边距、边框、外边距四个部分组成，根据宽度计算规则的不同，分为标准盒模型和怪异盒模型两种。
标准盒模型
标准盒模型是浏览器默认的盒模型类型，元素的width和height属性仅设置内容区的宽高，元素的实际总宽度需要加上左右内边距和左右边框的宽度。
/* 标准盒模型（默认） */
.box-standard {
box-sizing: content-box; /* 默认值，可省略 */
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
/* 实际总宽度 = 200 + 20*2 + 5*2 = 250px */
}
怪异盒模型
怪异盒模型也叫IE盒模型，设置box-sizing: border-box即可开启，此时width和height属性会包含内容区、内边距和边框的总宽高，内容区的宽高会自动减去内边距和边框的宽度。
/* 怪异盒模型 */
.box-border {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
/* 内容区宽度 = 200 - 20*2 - 5*2 = 150px */
/* 实际总宽度就是设置的200px */
}
什么是BFC
BFC即块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，属于标准文档流的一部分，但是BFC内部的元素和外部的元素相互隔离，内部的布局不会影响到外部元素，外部的元素也不会影响到BFC内部。
BFC的触发条件
满足以下任意一个条件的元素都会生成BFC：
- 根元素
<html> - 浮动元素：
float属性不为none - 绝对定位元素：
position为absolute或fixed - 行内块元素：
display为inline-block - 表格单元格：
display为table-cell - 表格标题：
display为table-caption - 弹性元素：
display为flex或inline-flex的直接子元素 - 网格元素：
display为grid或inline-grid的直接子元素 - 多列容器：
column-count或column-width不为auto overflow属性不为visible的块级元素
BFC的核心特性
BFC内部有以下几个核心渲染特性：
- BFC内部块级元素会在垂直方向一个接一个排列
- 垂直方向的距离由
margin决定，属于同一个BFC的两个相邻块级元素的上下外边距会发生重叠 - BFC的区域不会和浮动元素重叠
- 计算BFC的高度时，浮动子元素也会参与计算
- BFC内部的元素不会影响到外部元素，外部元素也不会影响到BFC内部
BFC的常见应用场景
解决外边距重叠问题
当两个相邻块级元素在同一个BFC中时，上下外边距会取较大值而不是相加，这时候可以给其中一个元素外面包裹一个BFC容器，让两个元素属于不同的BFC，就能避免外边距重叠。
<div class="box1">第一个盒子</div> <div class="bfc-container"> <div class="box2">第二个盒子</div> </div>
.box1, .box2 {
margin: 20px 0;
height: 50px;
background: #f0f0f0;
}
.bfc-container {
overflow: hidden; /* 触发BFC */
}
清除浮动解决父容器高度塌陷
当父容器内部的子元素浮动后，父容器会因为无法感知浮动元素的高度而出现高度塌陷，这时候给父容器触发BFC，BFC计算高度时会包含浮动子元素，就能解决高度塌陷问题。
<div class="parent"> <div class="child">浮动子元素</div> </div>
.parent {
overflow: hidden; /* 触发BFC */
border: 1px solid #333;
}
.child {
float: left;
width: 100px;
height: 100px;
background: #ccc;
}
实现自适应两栏布局
利用BFC区域不会和浮动元素重叠的特性，可以让左侧元素浮动，右侧元素触发BFC，右侧元素就会自动占据剩余宽度，实现自适应两栏布局。
<div class="left">左侧固定宽度</div> <div class="right">右侧自适应宽度，内容过多时会自动换行，不会和左侧浮动元素重叠</div>
.left {
float: left;
width: 200px;
height: 200px;
background: #e8e8e8;
}
.right {
overflow: hidden; /* 触发BFC */
height: 200px;
background: #f5f5f5;
}
总结
盒模型决定了单个元素的大小计算规则，是CSS布局的基础单位，而BFC则是控制块级元素渲染区域的独立容器，两者的配合能够解决大部分常见的CSS布局问题。实际开发中可以根据需求选择合适的盒模型类型，遇到外边距重叠、浮动导致的布局异常时，也可以优先考虑通过触发BFC来解决问题，提升布局的稳定性和可维护性。