多列布局

两列布局：定宽+自适应：

1：float+margin

2： absolute+margin

3：flex ；一列flex：1（缩写，1 1 0%）

4：float+overflow 右边独立；

三列布局：中间自适应，左右定宽

双飞翼布局和圣杯布局；

圣杯布局：父元素设置padding；子元素全部浮动，并且position：relative；左侧元素：margin-left:-100%;right:本身值；

右侧元素：margin-left：-本身值；right：-本身值；

双飞翼布局：所有元素浮动，中间元素加上margin；左边元素：margin:-100%;右边元素，margin-left：-本身值；

不定宽+自适应：

1：float+overflow 右边独立；

2：flex ；一列flex：1（缩写，1 1 0%）

 

等宽布局：

 

float：布局。。如果有间距，又不想用计算值的话怎么办？

父元素margin-left：-间距，这样父元素的宽度为100%+间距；

子元素width：25%，padding-left：间距；box-sizing：border-box；

不定元素个数怎么处理？

flex布局：子元素flex：1；

 

等高布局：

flex布局，在交叉轴方向上默认拉伸。可以左右两列等高；

float布局：父元素：overflow:hidden; 子元素左边：float：left；padding-bottom：9999px；

margin-bottom：-9999px。子元素右边：overflow:hidden;