这是一道面试题，你有多少种办法呢？

这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认

.left { width: 200px;}

我的理解分四大类

•flex 布局

•需设置父元素高度

•grid 布局

•需设置父元素高度

•绝对定位

•双子元素 absolute

•不需要设置父元素高度•子元素都设置高度，右边子元素 left：200px + width: 100%

•左元素 absolute + 右元素 margin-left

•不需要设置父元素高度•子元素都设置高度，右边子元素 margin-left: 200px + width: 100%

•float 浮动

•左元素左浮动，右元素不动

•无需父元素•左元素需设置宽高和浮动，右元素设置高度即可

•左元素左浮动，右元素右浮动

•无需父元素•左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（width: calc(100% - 200px)）

需要一个父元素做 flex 布局，且需要给它一个高度（撑开容器）

.father { display: flex; height: 200px;}.right { flex: 1;}grid 布局

高级的布局方式，子元素不需要设置宽度，单单设置父元素属性即可。

.grid { display: grid; grid-template-columns: 200px 100%; height: 200px;}双子元素 + absolute

需要给子元素设置宽高，不然撑不起来。右元素设置left: 200px

.father { position: relative; height: 200px;}.left { position: absolute; height: 200px;}.right { position: absolute; left: 200px; height: 200px; width: 100%;}左元素 absolute + 右元素 margin-left

.father { position: relative; height: 200px;}.left { position: absolute; width: 200px; height: 200px;}.right { width: 100%; height: 200px; margin-left: 200px;}无父元素 + 左元素左浮动，右元素不动

前两种都需要有个父元素，但浮动不需要

左边浮动，下一个元素独占位置，并排一行

同样，需要设置高度，子元素才能撑开

.left { float: left; height: 200px;}.right { height: 200px;}无父元素 + 左边左浮动，右边有浮动

浮动不需要父元素，浮动就区别于正常文档流

我的理解是正常文档流是二维层面，而浮动相当于成了三维，区别于 Z 轴

右边元素有浮动不够，还需要设置宽度

.left { float: left; height: 200px;}.right { float: right; height: 200px; width: calc(100% - 200px);}

只要是 float 实现此功能的，都不需要父元素，以及自身都需要设置高度

简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点

float 区别于其他三种，不需要父元素做容器

grid 区别于其他三种，不需要设置子元素（左元素的）宽

绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高

flex 最简单

附上线上 demo[1]

[1] 线上 demo: https://azhubaby.com/demo/左边固定，右边自适应.html