CSS:两栏布局的实现（*****五颗星）

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

两栏布局的具体实现：

1.利用浮动，将左边元素宽度设置为300px，并且设置向左浮动。将右边元素的margin-left设置为300px，宽度设置为auto（默认为auto，撑满整个父元素）。

<style>
        .outer {
            height: 300px;
            background: rgb(42, 219, 83);
        }
        .left {
            float: left;
            width: 300px;
            height: 300px;
            background: tomato;
        }
        .right {
            margin-left: 300px;
            height: 300px;
            width: auto;
            background: gold;
        }
    </style>

<div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>

2.利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

<style>
        .outer {
            height: 300px;
        }
        .left {
            width: 300px;
            height: 300px;
            background: tomato;
            float: left;
        }
        .right {
            height: 300px;
            background: gold;
            /* overflow: hidden，right清除浮动 */
            overflow: hidden;
        }
    </style>

<div class