HTML两栏布局和三栏布局

两栏布局

需求：两列布局，左侧宽度固定，右侧宽度适应窗口变化

1.方法一

        左侧右侧都浮动

2.方法二

        右侧定位

3.方法三

        左侧定位，右侧设置左外边距

4.方法四

        左侧定位，右侧有一层容器，设置容器左侧内边距（容器和内容都不用设置宽度）

5.方法五

       左侧浮动，右侧触发BFC（可以设置溢出隐藏）

6.方法六

        使用外边距为负数（向上拉100vh）把右侧拉到一行上

三栏布局

需求：三栏布局，中心板块的结构标签要在html结构中，左右板块的前面

圣杯布局

结构：

<div class="cont">
    <div class="mid">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

第一步：三个子元素都左浮动

第二步：第一个div宽度设置为父容器100%。（此时，后两个div排在下一行）

第三步：使用左外边距负数将后两个元素拉上去&#