CSS

水平居中 前置条件： 父元素必须是块级盒子容器 父元素宽度必须已经被设定好 场景一：子元素是 块元素 + 宽度未设定 不存在水平居中 原因：子元素是块元素，会充满整个父级元素宽度 场景二：子元素是 行

问题 子(项目)元素有margin-top，会超过父(容器)元素范围，变成父元素的margin-top，父子元素之间依然没有margin-top。这是我们不想要的。 方法一：父元素添加overflow

先说结论，一共有 1 + 4 中解决方案 前置条件 父元素的高度，是由非浮动的子元素的高度撑起 子元素浮动，父元素高度会坍塌 方法一：给父元素固定高度（不推荐） 缺点：往往在项目中很难提前固定好父元素

BFC(Block formatting context):块级格式化上下文 特点 一个独立的渲染区域 内部子元素不会影响外部 外部不影响内部 两种渲染区域（Formatting Context） 块

同一个BFC中的块元素，垂直方向的margin会合并（大的吞并小的）； 方式一：包裹块元素父类 方式二：父类元素，中间添加一个空的BFC