什么是BFC？BFC的布局规则是什么？如何创建BFC？

块级格式上下文是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的独立渲染区域

创建BFC 的规则：

• 相邻盒子依次垂直排列，垂直间距由margin决定，且两个相邻BOX的margin会发生重叠(距离由较大的margin来决定);
• 是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素
• 每个盒子的左外边缘接触内部盒子的左边缘
• BFC的高度的时候，浮动元素也会参与计算

创建BFC的方法：

• 根元素或其它包含它的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
• 具有overflow 且值不是 visible 的块元素

BFC 的应用体验open in new window

• 防止 margin 重叠
• 清除内部浮动
• 解决浮动引起高度塌陷

居中布局

• 水平居中
  • 行内元素: text-align: center
  • 块级元素: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center
• 垂直居中
  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table
• 水平垂直居中
  • absolute + transform
  • absolute + left + top + right + bottom + margin
  • flex + justify-content + align-items
  • grid + margin: auto

GPU加速

开启方式：transform、opacity、filter
开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动;

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

小红包免费领

小礼物走一走