弹性布局、以及各种布局的缺点

BFC（单独的块）规范：（块级格式化上下文）

1. 使用浮动
2. 绝对定位
3. Display：inline-block  table-cells单元格 flex
4. Overflow除了visible以外的值

BFC会解决

1. margin叠加问题
2. margin的传值问题 子边距给了父.给一个边框/浮动/定位..
3. 清除浮动
4. 解决覆盖问题

布局方式

1.）表格不做布局是因为：表格标签做布局比其他标签做布局 表格的标签更多，占用更多流量资源，加载速度变慢，一般不使用。

2.）浮动缺点：

对自身影响，使用浮动的块可以设置宽和高。

对父级来说，造成父容器坍塌（父级高度变为0）

对兄弟来说，在同一行能放下浮动与兄弟的情况下，兄弟元素发生变化。

3.）定位

4.）多列（并不常用）

Columns: Column-width;

5.）弹性盒子 

任何一个容器都可以指定为Flex布局，flex实现子元素在父元素中自动伸缩，适合移动端布局。

弹性布局

父容器变成弹性盒模型之后。子元素会成为行内块元素。子元素在主轴上会忽略自身宽度，自适应父容器。

flex-direction（决定主轴的方向（即项目的排列方向））

属性值有：

column-reverse：主轴为垂直方向，下到上。

column        ：主轴为垂直方向，上到下。

row（默认值） ：主轴为水平方向，从左到右。

row-reverse   ：主轴为水平方向，从右到左。

flex-wrap（定义子元素是否换行以及如何换行）换行时按照子元素的宽度进行换行

属性值有：

Nowrap：不换行

Wrap ：换行在第一行下面起一行

wrap-reverse 换行在第一行上当面起一行

综合写法： flex-flow：row wrap；

justify-content（定义子元素在主轴上的对齐方式）

属性值有

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个子元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（分散对齐）

align-items（定义子元素在竖直方向上对齐方式）

它的属性值有：

flex-start：交叉轴的起点对齐。

flex-end  ：交叉轴的终点对齐。

Center    ：交叉轴的中点对齐。

Baseline  : 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-center：flex-start (子元素多行对齐方式)