居中页面元素有很多种方式

利用flex、grid、绝对定位+负边距或者transform、text-align等等方式，他们适用于不同的场景，比如text-align就只能对inline元素起作用，vertical-align在默认情况下只是对行框内容进行对齐

下面介绍两种块级元素的居中方式 display: table\table-cell

块级上下文挺起来很抽象，W3C 中是这样解释的：

1. floats, absolute定位, 不是块级元素的块级容器(列如inline-block, table-cells, table-captions)，以及display为overflow等不是visible属性的元素，会为它们包含的内容建立新的block formatting context
2. 在block formatting context中，以容器的顶端为开始，Box一个接一个的垂直排列，两个相邻box之间的距离由margin决定，在相同的block formatting context中，两个相邻的块级Box会产生外边距合并 (这是重点)
3. 在block formatting context中，每一个Box的左边界紧挨着容器左边界(如果是从右到左的布局，那么触碰到右边界)。 在floats元素依然满足此要求(但是Box内的行框由于float可能会变窄)，除非建立了新的block formatting context(这种情况下box会由于float元素而变窄)

上面的话可以总结为：

block formatting context就是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素。反之如此

看了这么多，是不是感觉很抽象，没关系，我们与其去研究这些抽象的文字，不如来看看block formatting context能做什么。

这个东西其实很简单

使用css

1
2
3
4
5

.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

通常，你想要通过css transition来过渡属性，然后使用了下面代码transition: height 0.5s linear

然后又使用了 height: auto来自适应高度height: 0 -> height: auto

然后发现动画就像没发生一样，直接就在0和auto两个状态之间直接切换

你可能会认为出现了什么bug，或者代码写错了，其实不然