什么是BFC
BFC是块级格式化环境
BFC是CSS中隐藏的一个属性，当给某个元素设置指定属性时，可以开启元素的BFC
【CSS3|什么是BFC,BFC的使用】开启BFC后的特点：（可以使用开启BFC解决以下问题）
1.不会被浮动元素覆盖
2.子元素和父元素的外边距不会重叠
3.可以包含浮动的子元素
如何开启BFC
通过以下方式开启元素的BFC
float 的值不是 none
position 的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow 的值不是 visible
BFC的使用范围
1.当将子元素浮动导致父元素高度塌陷时
2.当子元素与父元素边距重叠时
3.当一个元素浮动后，下一个元素会自动往上排，导致浮动的元素覆盖了下面的元素时
最优方法
使用伪元素和clear：both 可以同时解决高度塌陷和外边距重叠的问题
因为大部分开启BFC的属性都会有副作用，和不足的地方，使用以下方式可以完美解决
.box3::after,
.box3::before {
content: '';
display: table;
clear: both;
}
推荐阅读
- 纯CSS 毛玻璃效果
- html|手把手教你用vuepress搭建自己的网站(2)
- vue3|vue3学习7（props以及验证）
- css|【前端】Emmet语法、CSS复合选择器、元素显示样式
- 笔记|CSS设置背景颜色透明
- html5|（前端知识点）CSS3 新特性与html5 新特性
- 微信小程序|微信小程序全局配置及页面配置
- 微信小程序（黑马）|【微信小程序】WXML语法——数据绑定
- 微信小程序（黑马）|【微信小程序】运行机制和更新机制