共计 2991 个字符，预计需要花费 8 分钟才能阅读完成。
1、元素的 BFC 特性
BFC 全称为”Block Formartting Context”，中文为”块级格式化上下文”。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。
BFC 布局规则：
1）bfc 内部的元素会在垂直方向，一个接一个地放置
2）盒子垂直方向的距离有 margin 决定，属于同一个 bfc 的两个相邻元素的 margin 会发生重叠
3）每个盒子的左外边缘 (margin-left) 会与其父元素的左边缘 (border-left) 相接触
4）bfc 的区域会通过变窄来自适应而不会与 float 元素重叠在一起
5）bfc 的高度计算时，浮动元素也参与计算。即创建了新的 bfc 的元素的高度会把内部浮动元素的高度也算进去
6）bfc 是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素；同理容器内的子元素也不会影响到父元素外面的
其他元素。
创建 BFC 的条件：
a）html 元素
b）float 的值不为 none
c）overflow 的值为 auto、hidden 或 scroll
d）display 的值为 table-cell、inline-block、table-caption、flex、inline-flex
e）position 的值不为 relative 和 static
2、BFC 作用 —- 理解 BFC(个人理解)
1、因为 bfc 内部的元素与外部的元素绝对不会互相影响，因此当 bfc 元素的兄弟元素有浮动时，它不应该影响 bfc 内部元素的布局，
所以 bfc 会通过变窄来自适应，而不会与浮动元素发生重叠；
2、同样的，当 bfc 内部有浮动时，为了不影响外部元素的布局，bfc 计算高度时会把浮动元素的高度也计算进去。
利用 bfc 避免 margin 重叠也是同样的道理。
3、BFC 应用之：利用 bfc 特性实现左侧不固定，右侧也不固定的布局
图片来自：张鑫旭 – 粉丝群第 1 期 CSS 小测点评与答疑如图：这种布局在移动端一般比较常见，左侧文字宽度不固定，右测文字宽度不固定，文字断行后也要保持同样的行距。在移动端中可以使用 flex 布局，grid 布局，如果不使用 css3 布局，我们能否实现呢？答案是可以的，可以使用 浮动 +bfc 特性！
<style>
body,dl,dd,dt,p{padding: 0;margin: 0;}
dl{
width: 30%;
padding: 10px;
border: 1px solid #ccc;
margin: 10px auto;
}
dt{
float: left; margin-right: 25px;
}
dd{
margin-bottom: 10px;
word-break: break-all;
text-align: left;
/* 为 dd 元素创建一个 bfc，根据 bfc 布局规则第 4 条，bfc 的区域会通过变窄来自适应而不会与 float 元素重叠在一起，
所有这就达到了我们想要的效果。*/
overflow: hidden;
}
</style>
<dl class=”dl2″>
<dt> 手机系统 </dt>
<dd>Android</dd>
<dt> 登录方式 </dt>
<dd>QQ 互联登录 </dd>
<dt> 绑定事件 </dt>
<dd>2019-01-02 00:01</dd>
<dt> 其他 </dt>
<dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd>
<dt> 备注 </dt>
<dd> 如果需要修改绑定，请联系 HR 进行修改！</dd>
</dl>
下图是 dd 创建了 bfc 与未创建 bfc 的对比：
由图片可以看出，创建了 bfc 的 dd 的宽度自适应的变窄了，而未创建 bfc 的 dd 却与浮动的 dt 重合了。
4、BFC 应用之：利用 bfc 特性解决 margin 塌陷问题
margin 塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个 margin-bottom，另一个设置 margin-top，此时两个元素的 margin 就会发生重叠。margin 重叠规则：
1）margin 的值都为正数时，取它们之间较大的值
2）margin 的值都为负数时，取两个 margin 绝对值中较大的值
3）两个 margin 一正一负时，取两个 margin 相加的和
margin 塌陷与不塌陷效果：
<style>
body,dl,dd,dt,p{padding: 0;margin: 0;}
.float-container{
width: 30%;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.float-box{
/* 元素浮动后就创建了 bfc，两个元素就创建了两个 bfc，根据 BFC 布局规则第 5 条，.float-container 的高度会把浮动元素的高度也计
算进去；根据 BFC 布局规则第 2 条，两个.float-box 分别创建了 2 个 bfc，因此它们之间的 margin 并不会重叠 */
float: left;
width: 100%;
height: 60px;
margin: 20px 0;
color: #fff;
}
.float-box:nth-child(1){background-color: #ccc;}
.float-box:nth-child(2){background-color: #f10;}
.no-bfc-container{
width: 30%;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
}
.no-bfc-box{
height: 60px;
margin: 20px 0;
color: #fff;
}
.no-bfc-box:nth-child(1){background-color: #ccc;}
.no-bfc-box:nth-child(2){background-color: #f10;}
.bfc-box{
/* 根据 BFC 布局规则第 2 条，.bfc-box 创建了一个 bfc，与第一个.no-bfc-boxbu 元素不属于同一个 bfc，因此两个.no-bfc-box 元素的
margin 也不会发生重叠 */
overflow: hidden;
}
</style>
<body>
<div class=”float-container”>
margin 未塌陷
<div class=”float-box”>margin: 20px 0;</div>
<div class=”float-box”>margin: 20px 0;</div>
</div>
<div class=”no-bfc-container”>
margin 塌陷
<div class=”no-bfc-box”>margin: 20px 0;</div>
<div class=”bfc-box”>
<div class=”no-bfc-box”>margin: 20px 0;</div>
</div>
</div>
</body>
6、参考文章
1、https://www.zhangxinxu.com/wo… (引导文章)2、https://www.zhangxinxu.com/wo…3、https://www.w3cplus.com/css/u…4、https://blog.csdn.net/w362427…5、https://blog.csdn.net/shadow_…
