1.BFC
BFC的英文全称是block formatting context，即格式化上下文，当元素触发BFC时会变成一个独立的环境。这里列举一个触发BFC的方法，在父级元素加入overflow:hidden;其适用场景有：(1)为父级找高(2)子级margin-top将父级一起往下带(3)兄弟级元素浮动后影响其他元素，将受影响的元素触发BFC变成独立环境
2.可以触发BFC的元素：
(1)根元素
(2)float
(3)overflow:auto.scroll.hidden
(4)display:flex.table-cell.table-caption.inline-block.inline-flex
(5)position:absolute.fixed.relative
3.块级元素水平垂直居中方法
(1) 未知块级元素的宽高：给父级元素设置display:flex;align-items:center(垂直居中);justify-content:center(水平居中);
(2) 已知块级元素的宽高：给父元素设置position:relative;子元素设置position:absolute;top:50%;left:50%;margin-top:-hight/2;margin-left:-width/2;
(3) 已知块级元素的宽高：给子元素设置position:absolute;top:0;right:0;bottom:0;left:0;margin:0 auto;
如果只需要水平居中，还可以给元素本身设置margin:0 auto;
来源：https://www.cnblogs.com/xxqd/p/12198296.html