网页基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧固定，右侧自适应布局</title>
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<div class="left">左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧</div>
<div class="right">右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧</div>
</div>
</body>
</html>
1、float+bfc，缺点：父元素需要清除浮动，否则高度计算不会包括浮动元素。
/* 清除浮动 */
.wrapper::before, .wrapper::after {
display: table;
content: '';
clear: both;
}
/* 左侧浮动 */
.left {
width: 100px;
float: left;
}
/* 右侧触发bfc */
.right {
overflow: hidden;
}
2、float + margin-left，缺点也是父元素需要清除浮动，否则高度计算不会包括浮动元素。
/* 清除浮动 */
.wrapper::before, .wrapper::after {
display: table;
content: '';
clear: both;
}
/* 左侧浮动 */
.left {
width: 100px;
float: left;
}
/* 右侧使用margin-left撑开位置 */
.right {
margin-left: 100px;
}
3、inline-block+calc，缺点：父元素需要设置font-size: 0;来清除默认间距，子元素要设置vertical-align: top;来使顶部对齐。
/* 清除默认间距 */
.wrapper {
font-size: 0;
}
.left, .right {
display: inline-block;
vertical-align: top; /* 顶部对齐 */
font-size: 16px;
}
/* 左侧固定宽度 */
.left {
width: 100px;
}
/* 右侧计算宽度 */
.right {
width: calc(100% - 100px);
}
4、table-cell
/* 父元素设置为table */
.wrapper {
display: table;
}
/* 子元素设置为table-cell */
.left, .right {
display: table-cell;
}
/* 左侧固定宽度 */
.left {
width: 100px;
}
5、flex，缺点：低版本IE不支持
/* 父元素设置为flex */
.wrapper {
display: flex;
}
/* 左侧固定宽度 */
.left {
width: 100px;
}
/* 右侧设置flex: 1; */
.right {
flex: 1;
}
6、grid，缺点：可能有兼容性问题。
.wrapper {
display: grid;
grid-template-columns: 100px 1fr
}
