CSS两栏三栏布局

所有的布局都用一个容器（container）包含。

两栏布局

1. 浮动float+margin

<div class="container">
        <div class="left ">我是左边</div>
        <div class="right ">我是右边</div>
</div>

.container{
        width: 1200px;
        margin: 0 auto;
    }
    .left{
        background-color: aqua;
        float: left;
        width: 100px;
    }
    .right{
        background-color: beige;
        margin-left: 100px;
    }

2.绝对定位position+margin

<div class="container">
        <div class="left ">我是左边</div>
        <div class="right ">我是右边</div>
</div>

.container{
        width: 1200px;
        margin: 0 auto;
    }
    .left{
        position: absolute;
        width: 100px;
        background-color: azure;
    }
    .right{
        margin-left: 100px;
        background-color: blueviolet;
    }

3.浮动float+ BFC

为左侧元素设置浮动后，左侧元素会因为浮动盖在右侧元素上，因此要将右侧元素变成BFC，BFC是一个独立的区域，不会让之外的元素对其内部造成干扰，当右侧元素变成一个BFC时它的元素边界会发生变化，会紧紧贴合左边的元素，有很多种设置BFC的方法，可以自行搜索。

<div class="container">
        <div class="left ">我是左边</div>
        <div class="right ">我是右边</div>
</div>

.container{
        width: 1200px;
        margin: 0 auto;
    }
    .left{
        float:left;
        width: 100px;
        background-color: azure;
    }
    .right{
        overflow: hidden;
        background-color: blueviolet;
    }

4. Flex布局

具体的Flex相关知识可以看https://blog.csdn.net/weixin_39717076/article/details/82586915这篇文章。

<div class="container">
        <div class="box">
                <div class="left ">我是左边</div>
                <div class="right ">我是右边</div>
         </div>
</div>

.container{
        width: 1200px;
        margin: 0 auto;
    }
    .box{
        display: flex;
    }
    .left{
        background-color: azure;
        width: 100px;
    }
    .right{
        background-color: blueviolet;
        flex: 1;
    }

5. table

<div class="container">
			<!--多了一个box，是因为布局需要父容器来进行配合  -->
            <div class="box">   
                <div class="left ">我是左边</div>
                <div class="right ">我是右边</div>
            </div>
</div>

.container{
        width: 1200px;
        margin: 0 auto;
    }
    .box{
        display: table;
        /* 这里要设置为100%，这样 子table-cell在左侧宽度固定的情况下，右侧才会自动布满整个剩余宽度 */
        width: 100%;    
    }
    .left{
        background-color: azure;
        display: table-cell;
        width: 100px;
    }
    .right{
        background-color: blueviolet;
        display: table-cell;
    }

三栏布局

1. 浮动float+margin

<div class="container">  
                <div class="left">我是左边</div>
                <div class="right">我是右边</div>
                <div class="main">我是中间</div>
</div>

.container{
        margin: 0 auto;
        width: 1200px;
    }
    .left{
        width: 100px;
        float: left;
        border: 1px solid #cccccc;
    }
    .main{
        margin:0 102px;
        border: 1px solid #cccccc;
    }
    .right{
        width: 100px;
        float: right;
        border: 1px solid #cccccc;
    }

2. 绝对定位position+margin

<div class="container">  
                <div class="left">我是左边</div>
                <div class="right">我是右边</div>
                <div class="main">我是中间</div>
</div>

.container{
        margin: 0 auto;
        width: 1200px;
        position: relative;
    }
    .left{
        width: 100px;
        position: absolute;
        left:0;
        border: 1px solid #cccccc;
    }
    .main{
        margin:0 102px;
        border: 1px solid #cccccc;
    }
    .right{
        width: 100px;
        position: absolute;
        right:0;
        border: 1px solid #cccccc;
    }

3.浮动float+ BFC

<div class="container">  
                <div class="left">我是左边</div>
                <div class="right">我是右边</div>
                <div class="main">我是中间</div>
</div>

.container{
        margin: 0 auto;
        width: 1200px;
    }
    .left{
        width: 100px;
        float: left;
        border: 1px solid #cccccc;
    }
    .main{
        overflow:hidden;
        border: 1px solid #cccccc;
    }
    .right{
        width: 100px;
        float: right;
        border: 1px solid #cccccc;
    }

4. Flex布局

这里的布局方式与前面三种不同的地方除了Flex，还有div顺序放置的要素，前三种方式由于是浮动定位，把浮动定位的子元素放在了非浮动定位的子元素之前，但是Flex布局是对所有子项目弹性布局，所以不需要更改div在DOM节点中的位置

<div class="container">  
            <div class="box">
                    <div class="left">我是左边</div>
                    <div class="main">我是中间</div>
                    <div class="right">我是右边</div>
            </div>
        </div>

.container{
        margin: 0 auto;
        width: 1200px;
    }
    .box{
        display: flex;
    }
    .left{
        width: 100px;
        border: 1px solid #cccccc;
    }
    .main{
        flex: 1;
        border: 1px solid #cccccc;
    }
    .right{
        width: 100px;
        border: 1px solid #cccccc;
    }

5. table布局

<div class="container">  
            <div class="box">
                    <div class="left">我是左边</div>
                    <div class="main">我是中间</div>
                    <div class="right">我是右边</div>
            </div>
        </div>

.container{
        margin: 0 auto;
        width: 1200px;
    }
    .box{
        display: table;
        width: 100%;
    }
    .left{
        display: table-cell;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .main{
        display: table-cell;
        border: 1px solid #cccccc;
    }
    .right{
        display: table-cell;
        width: 100px;
        border: 1px solid #cccccc;
    }

---

圣杯布局和双飞翼布局的共同点：
1.都是实现左右宽度固定，中间自适应
2.在DOM中主内容必须第一个加载（所以要把main放在left和right前面）
3.其父元素的高度始终是由三栏中最高的元素决定

6.圣杯布局

圣杯布局的html如下，要点就是把main放在最前面

<div class="container">  
        <div class="box">
                <div class="main">我是中间</div>
                <div class="left">我是左边</div>
                <div class="right">我是右边</div>
        </div>
    </div>

css部分的实现思路是：
1.三栏都设置左浮动
2.main的宽度设置为100%
3.left的margin-left设为-100%，right的margin-left设为-100px（它本身的宽度），这是为了让三个元素保持在一排
4.但是上面一步后元素显示会有重叠，为了解决这个问题，要设置左栏的left和右栏的right为-100px（元素的宽度），那么定位就得都设置相对定位
5.让所有元素都显示在盒子box中，设置overflow:hidden，就要设置左右内边距来给左右栏滕位置，这样所有元素就都在box中了

.container{
        margin: 0 auto;
        width: 800px;
    }
    .box{
        overflow: hidden;
        padding: 0 100px;
    }
    .left,.right,.main{
        float: left;
        position: relative;
    }
    .left{
        width: 100px;
        margin-left: -100%;
        left:-100px;
        background-color: aliceblue;
    }
    .main{
        width: 100%;
        background-color: aqua;
    }
    .right{
        width: 100px;
        margin-left: -100px;
        right:-100px;
        background-color: aliceblue;
    }

7.双飞翼布局

html部分主要的不同是双飞翼要在main内嵌一个div，然后为之设置margin值

<div class="container">  
        <div class="box">
                <div class="main"><div class="inner-main">我是中间</div></div>
                <div class="left">我是左边</div>
                <div class="right">我是右边</div>
        </div>
    </div>

css实现思路，前三步与圣杯布局相同
1.三栏都设置左浮动
2.main的宽度设置为100%
3.left的margin-left设为-100%，right的margin-left设为-100px（它本身的宽度），这是为了让三个元素保持在一排
4.上一步完成后，左右栏都和中间栏main重叠了，这个时候给main的inner-main设置一个margin值，就可以让中间栏的部分不被遮挡，都显示在inner-main中了

.container{
        margin: 0 auto;
        width: 800px;
    }
    .box{
        overflow: hidden;
    }
    .left,.right,.main{
        float: left;
    }
    .left{
        width: 100px;
        margin-left:-100%;
        background-color: aliceblue;
    }
    .main{
        width: 100%;
        background-color: aqua;
    }
    .inner-main{
        margin:0 100px;
    }
    .right{
        width: 100px;
        margin-left:-100px;
        background-color: aliceblue;
    }

参考文章：
https://blog.csdn.net/eva_lu/article/details/79633044
https://www.cnblogs.com/luoyanan/p/9128582.html