定位和二、三列布局

1.有哪些定位方式？

普通定位（block、inline）、相对定位、绝对定位、固定定位、浮动定位。

绝对定位和浮动定位的异同：

两者的共同点：对内联元素设置float或absolute属性，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。

两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。position属性为absolute或fixed的元素，会渲染成DOM的单独分支，重排的开销会比较小，因为不用考虑它对其他元素的影响

在左右布局时用浮动，其他用绝对定位

2.两列布局

1.float+margin-left

1）使用 float 左浮左边栏；

2）右边模块使用 margin-left 撑出内容块做内容展示；

3）为父级元素添加BFC，防止下方元素飞到上方内容。

2.flex

1）父元素设置display：flex

2）左列固定宽度 with：200px

3）右列 flex：1

3.三列布局

1.两边固定宽度用float，中间自适应宽度用margin

此实现方式存在缺陷：

a、主体内容是最后加载的。

b、右边在主体内容之前，如果是响应式设计，不能简单的换行展示

c、宽度小于左右部分宽度之和时，右侧部分会被挤下去。

2.