Document

left

float + margin

1.浮动左列

2.右列自适应，且设置margin-left

实用性：兼容性好，但是浮动后超出无法顶开父容器高度

left

float + margin

1.浮动左列

2.右列自适应, 右列负margin-left

3.右列子元素正margin-left

实用性：兼容性虽好，但是相当麻烦的方案，从布局角度看右列部分超到了左列部分，还额外需要一个子元素，父元素由于两个子元素都浮动，高度彻底塌陷，还额外需要清除浮动

left

float + overflow

1.浮动左列，左列指定宽度

2.右列overflow: hidden, 触发右列 BFC 模式

3.父元素 overflow 之后，触发 BFC 模式，浮动后仍然可以撑开父容器高度

实用性：兼容性好，较为常用的实现方式，基本没什么后遗症

left

表格布局

1.父元素设置 display:table; table-layout:fixed; 设置宽度

2.子元素设置 table-cell

3.左列设置宽度

实用性：不需要用到浮动，高度不会塌陷，且可以实现双边等高布局，但是也只会是等高布局，无法设置左右列边距

left

flexbox

1.父元素 display:flex

2.左列设置宽度，右列flex:1

3.右列flex:1

4.align-items: start; 设置为 start 就不撑满

实用性：PC端IE9+，简洁明了的布局方式，可以通过控制 align-items 实现等高或者不等高。

left

网格布局

1.父元素设置 display:grid

2.父元素设置 grid-template-columns: 200px 1fr; 实现左列100px 右列自适应

3.align-items: start; 设置为 start 就不撑满

实用性：更加简洁，高效的二维布局方式，但是兼容性 ie11+ 还是相对蛋疼