这是一道面试题，你有多少种办法呢？
这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认
.left {
width: 200px;
}
我的理解分四大类
-
flex 布局
- 需设置父元素高度
-
grid 布局
- 需设置父元素高度
-
绝对定位
-
双子元素 absolute
- 不需要设置父元素高度
- 子元素都设置高度，右边子元素
left：200pxwidth: 100%
-
左元素 absolute 右元素 margin-left
- 不需要设置父元素高度
- 子元素都设置高度，右边子元素
margin-left: 200pxwidth: 100%
-
-
float 浮动
-
左元素左浮动，右元素不动
- 无需父元素
- 左元素需设置宽高和浮动，右元素设置高度即可
-
左元素左浮动，右元素右浮动
- 无需父元素
- 左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（
width: calc(100% - 200px)）
-
flex 布局
需要一个父元素做 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 要记得参数比较多）。绝对定位和浮动各有优缺点
| 各大方法 | 优缺点 | 需要什么 |
|---|---|---|
| flex | 布局简单 | 需要父元素、高度。子项 flex:1 |
| grid | 布局最简单，但兼容性更现代 | 只需要父元素设置属性就好 |
| 绝对定位 | 兼容性更高 | 需要父元素做相对定位、高度 |
| 浮动 | 兼容性更高 | 不需要父元素，子项都需要宽高 |
float 区别于其他三种，不需要父元素做容器
grid 区别于其他三种，不需要设置子元素（左元素的）宽
绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高
flex 最简单
