BFC 及清除浮动 和 高度塌陷问题

BFC 及清除浮动
答：BFC(block fromatting context): 块级格式化上下文，渲染出一个独立的容器，让内部元素不受外部影响

如何创建BFC
答： 1 float不为none
2 overflow不为visible
3 position 为absolute fixed
4 display inline-block flex inline-flex

BFC的作用
1 解决margin重叠问题
2 制作二栏布局（左边规定，右边自适应）
3 解决高度塌陷问题

高度塌陷问题以及解决办法
答：子元素浮动后，无法撑起父元素高度，导致父元素高度丢失，其下元素会自动上移
1、设置元素的浮动
2、将元素设置为行内块元素：display:inline-block
3、设置overflow为非visible的值：overflow:hidden
4、在结尾处添加空div标签clear:both。
5、给父元素设置伪元素选择器，并设置清除浮动的样式：:after{content:"";display:block;clear:both; visibility:hidden;}万能清浮动法
6、父级div定义height

参考文献： https://blog.csdn.net/weixin_43974265/article/details/115416184
https://blog.csdn.net/m0_53206841/article/details/124419975
https://blog.csdn.net/qq_45799465/article/details/122650376