实现三栏布局有哪些方法flex布局 float布局绝对定位 BFC布局 BFC怎么理解：BFC是一个完全独立的空间，将

flex布局

<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
    }
    .left, .right{
        width: 200px;
        height: 100%;
        background-color: rgb(208, 142, 20);
    }
    .middle{
        height: 100%;
        background-color: pink;
        flex: 1;
        min-width: 200px;
    }

</style>

float布局

<body>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
    }
    .left, .right{
        width: 200px;
        height: 100%;
        background-color: rgb(208, 142, 20);
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .middle{
        height: 100%;
        background-color: pink;
        min-width: 200px;
        margin: 0 200px;
    }
</style>

绝对定位

<body>
    <div class="left">左</div>
    <div class="middle">中</div>
    <div class="right">右</div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .left, .right{
        width: 200px;
        height: 100%;
        background-color: rgb(208, 142, 20);
        position: absolute;
    }
    .left {
        left: 0%;
        top: 0%;
    }
    .right {
        right: 0%;
        top: 0;
    }
    .middle{
        height: 100%;
        background-color: pink;
        min-width: 200px;
        margin: 0 200px;
    }
</style>

BFC布局 BFC怎么理解：BFC是一个完全独立的空间，将元素设置成BFC可以让空间里的子元素不会影响到外面的布局。 overflow: hidden

<body>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
    }
    .left, .right{
        width: 200px;
        height: 100%;
        background-color: rgb(208, 142, 20);
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .middle{
        height: 100%;
        background-color: pink;
        min-width: 200px;
        overflow: hidden;
    }
</style>