什么是 BFC

BFC（Block Formatting Context）是 Web 页面中的一个布局模式，是一种用来包含浮动元素的布局方法。

BFC 布局规则如下：

1. BFC是块级元素，会在垂直方向依次排列。
2. Box 在垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻元素的 margin 会重叠。
3. BFC 是页面上的独立容器，容器内的子元素不会影响外层元素的布局。反之也如此。

创建 BFC

1. float 非 none
2. position 为 absolute 或 fixed
3. overflow 不为 visible
4. display 为 block、inline-block、flex、inline-flex、grid、inline-grid、table-cell等

flex

flex 是一维布局，通常称为弹性盒子布局，其布局是一维的，一次只能处理一个维度上的数据，一行或一列。

其有两个轴，主轴和交叉轴，主轴由 flex-direction 决定，交叉轴垂直于主轴

flex 布局的属性有：

• flex-direction：决定主轴的方向，默认是 row，即从左到右排列。
• flex-wrap：决定是否换行，默认是 nowrap，即不换行。
• flex-flow：flex-direction 和 flex-wrap 的简写，默认是 row nowrap。