两栏布局
右侧不设置宽，实现一栏自适应。
1. float + margin-left
左侧设置float，且设置宽度，右侧margin-left为左侧的宽度
html"><head><style>.left{width: 300px;height: 500px;background-color: palegreen;float: left;}.right{margin-left: 300px;height: 500px;background-color: wheat;}</style>
</head>
<body><div><div class="left"></div><div class="right"></div></div>
</body>
但是有一个情况
html"><div class="box"><div class="left"></div><div class="right"></div>
</div>
内容
内容在盒子外，但却跑到右边去了。
这是因为使用了float浮动的原因，浮动导致元素脱离原本的文档流，导致父元素高度塌陷，其他内容快便会自动排版上去，可使用触发bfc的方式，为父元素添加BFC，防止下方元素飞到上方元素。
html">.box{overflow: hidden;
}
2. float + overflow
左侧float，并设置宽，右侧overflow：hidden，实现自适应。
此方法也会出现父元素高度塌陷的问题，所以给父元素添加overflow：hidden
html"><style>.left{width: 300px;height: 400px;background-color: palegreen;float: left;}.right{height: 200px;overflow: hidden;background-color: wheat;}.box{overflow: hidden;}</style>
3. absolute定位
父元素设置position：relative
左侧固定宽度，右侧设置absolute，并且设置top为0，让元素上移，left为左侧固定宽度，right为0，让其能够自适应
html"><style>.left{width: 300px;height: 400px;background-color: palegreen;}.right{height: 200px;background-color: wheat;position: absolute;top: 0;left: 300px;right: 0;}.box{position: relative;}
</style>4. flex布局（推荐使用）
方法较为简单
父元素设置display为flex，左侧固定宽度，右侧设置flex为1，自动填充容器
html"><style>.left{width: 300px;height: 400px;background-color: palegreen;}.right{height: 200px;background-color: wheat;flex: 1;}.box{display: flex;}
</style>三栏布局
实现左右固定，中间自适应
当实现中间部分前置的，意思就是html中将中间部分写在最前面，可以实现中间部分优先加载
1. flex布局（推荐）
父元素设置display为flex，左右固定宽度，中间元素设置flex为1，自动填充容器。不可前置
html"><head><style>.left{width: 300px;height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;flex: 1;}.right{width: 300px;height: 200px;background-color: olivedrab;}.box{display: flex;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>
2. absolute + margin
父元素设置relative，左右absolute固定在两侧，left设置top和left为0，右侧设置top和right为0
中间使用margin让左右外边距为两侧固定宽度
该方法可将middle前置
html"> <style>.left{width: 300px;height: 400px;background-color: darkcyan;position: absolute;top: 0;left: 0;}.middle{background-color: gold;height: 500px;margin-left: 300px;margin-right: 200px;}.right{width: 200px;height: 200px;background-color: olivedrab;position: absolute;top: 0;right: 0;}.box{position: relative;}</style>
</head>
<body><div class="box"><div class="middle"></div><div class="left"></div><div class="right"></div></div>
</body>
3. float + margin
左右两侧设置float浮动，左侧为left，右侧为right
中间margin设置左右外边距为左右固定宽度
注意：middle元素要放在最后，因为div独占一行，前面设置浮动，后面就会尾随其上，如果middle放在第二个，那么会占一行，右边即使设置float都会在下一行显示
html"><head><style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;}.middle{background-color: gold;height: 500px;margin-left: 300px;margin-right: 200px;}.right{width: 200px;height: 200px;background-color: olivedrab;float: right;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div><div class="middle"></div></div>
</body>如果middle在第二个，将会变成下图这样
4. table（不常用）
父元素设置display为table，table-layout为fixed，宽度是由自身宽度决定，而不是自动计算，并且要设置宽度，不然中间的width将会撑满全屏
左中右都设置display为table-cell，为表格单元，左右固定宽，中间width为100%，实现自适应
该方法不可实现中间元素前置
html"><style>.left{width: 300px;height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;width: 100%;}.right{width: 200px;height: 200px;background-color: olivedrab;}.box{display: table;table-layout: fixed;width: 800px;}.left,.middle,.right{display: table-cell;}
</style>5. grid网格布局
父元素设置display为grid，grid-template-columns: 左宽度 auto 右宽度
该方法不可实现中间元素前置
html"><style>.left{/* width: 300px; */height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;}.right{/* width: 200px; */height: 200px;background-color: olivedrab;}.box{width: 800px;display: grid;grid-template-columns: 300px auto 200px;}
</style>6. 圣杯布局
首先middle元素要写在第一个，然后步骤为：
给父元素设置padding-left和padding-right，空出左右栏的位置；
左中右设置浮动；
中间设置width为100%，实现自适应；
左右宽度为父元素的左右内边距padding；
左侧设置margin-left为-100%，让元素到上一行，且向左移动，与父元素左边缘对齐，然后设置定位relative，left为负的自身宽度；
右侧设置margin-left为负的自身宽度，定位relative，right为负的自身宽度
html">
<style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;margin-left: -100%;left: -300px;position: relative;}.middle{background-color: gold;height: 500px;width: 100%;float: left;}.right{width: 200px;height: 200px;background-color: olivedrab;float: left;margin-left: -200px;position: relative;right: -200px;}.box{padding-left: 300px;padding-right: 200px;}
</style><body><div class="box"><div class="middle"></div><div class="left"></div><div class="right"></div></div>
</body>7. 双飞翼布局
中间元素使用双层标签
与圣杯布局类似，左右和center设置浮动，center的width为100%，左侧设置margin-left为-100%，右侧margin-left为负的自身宽度，middle设置margin左右外边距为左右固定宽度，且高度和颜色设置在middle中
中间元素也需要写在第一个
html"><style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;margin-left: -100%;}.center{float: left;width: 100%;}.middle{height: 500px;margin-left: 300px;margin-right: 200px;background-color: gold;}.right{width: 200px;height: 200px;background-color: olivedrab;float: left;margin-left: -200px;}
</style><body><div class="box"><div class="center"><div class="middle"></div></div><div class="left"></div><div class="right"></div></div>
</body>
