一. 两列布局
<1> 一列定宽、一列自适应
比如：左列定宽、右列自适应
(1) float + margin
定宽的那列 float ，自适应的 margin-left / margin - right的值设置为定宽的宽度即可！！
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
margin-left: 100px; /*大于等于#left的宽度*/
}
(2) float + margin-left : -100%
定宽的那列，还是 float ，自适应的那列外面还需要套一个父盒子，设置其宽度为 100% ，这样，它会在定宽的那列下面显示，所以需要通过设置其父盒子 margin-left : -100%，让它上去，然后在设置子盒子的 margin-left : 定宽的宽度，即可！！
<body>
<div id="left">左列定宽</div>
<div id="right-fix">
<div id="right">右列自适应</div>
</div>
</body>
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right-fix {
float: right;
width: 100%;
margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
#right{
margin-left: 100px; /*大于或等于#left的宽度*/ background-color: #0f0;
height: 500px;
}
(3) float + 开启BFC（不覆盖浮动的元素）
定宽的float ，自适应的如果什么都不设置，默认会去占领定宽的左列的位置，所以只需给它开启 BFC (eg: overflow : hidden) 即可！！！
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
overflow: hidden; /*触发bfc达到自适应*/
}
(4) table
(5) 绝对定位
(6) flex
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
#parent{
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: #0f0;
}
#right {
flex: 1; /*表示该元素会自己分了父元素剩余空间*/
background-color: #0f0;
}
(7) grid
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
#parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*设定2列就ok了,auto换成1fr也行，表示剩余的空间自己占了！！*/
}
#left {
background-color: #f00;
}
#right {
background-color: #0f0;
}
<2> 一列不定宽（随内容改变而改变），一列自适应
(1) float + 开启BFC（不覆盖浮动的元素）
使用该方法，不用设置具体宽度，可以达到不定宽的效果，只需给自适应的一列开启 BFC 即可！！！
(2) flex
不定宽的不设宽度，自适应的 flex属性设为 1 ，表示它独占剩余部分！！！
(3) grid
不定宽的宽度设置为 auto ，表示随内容变化而变化，自适应的设为 1fr ，表示独占剩余部分！！
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
#parent{
display: grid;
grid-template-columns: auto 1fr; /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
}
#left {
margin-right: 10px;
height: 500px; background-color: #f00;
}
#right {
height: 500px;
background-color: #0f0;
}
二. 三列布局
<1> 两列定宽，一列自适应
跟两列的实现思路差不多！！
(1) float + margin
(2) float + 开启BFC（不覆盖浮动的元素）
(3) table
(4) flex
(5) grid
<2> 两侧定宽，中间自适应
请看下一篇的圣杯布局法 和双飞翼布局法！！！（细说）
