怎么实现三列布局，左侧和右侧宽度固定，中间自适应

1.使用自身浮动法：

自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。

该布局法的不足是三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。

2.使用绝对定位法：

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的middle会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

该法布局的好处，三个div顺序可以任意改变。但是因为是绝对定位，如果页面上还有其他内容，top的值需要小心处理。

 <style>
        .main {
            position: fixed;
            width: 100%;
            height: 300px;
            /* background-color: pink; */
        }

        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: red;
        }

        .right {
            position: absolute;
            right: 0;
            top: 0;