網頁基本結構：
<!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
}
