在上海乐字节学习的第十五天（持续更新中）-CSDN博客

本文链接：https://blog.csdn.net/weixin_51514337/article/details/109483724

实现双飞翼的三种方法
双飞翼布局的关键是左右两栏加浮动，但是中间栏不占据左右两栏的位置。

一、用BFC实现

BFC规定BFC的区域不会与float box重叠，触发条件为
1.html 就是一个BFC
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible
所以可以将左右两栏加浮动，中间用overflow:hidden;触发BFC，使中间栏不占据左右两栏的位置。
注：必须将左右两栏布局写在center前面。

 .box{
            width:100%;
            height:100%;
            background:purple;
        }

        .left{
            width:200px;
            height:100%;
            float:left;
            background:pink;
        }
        .center{
            height:100%;
            background:green;
            overflow:hidden;
        }
        .right{
            width:200px;
            height:100%;
            float:right;
            background:#dd0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

二、用margin实现

用margin解决左右两栏浮动后，中间栏占据左右两栏位置的方法：
margin控制的是元素与元素之间的间距，可以用margin使中间栏这个元素距离父元素左右两边的间距恰好为为左右两栏的宽度。

 *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:grey;
        }
        .left{
            width:200px;
            height:90%;
            background:pink;
            float:left;
        }
        .right{
            width:200px;
            height:90%;
            background:blue;
            float:right;
        }
        .center{
            height: 100%;
            background:#dd0;
            margin:0 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

三、用padding实现

用padding解决左右两栏浮动后，中间栏占据左右两栏位置的方法：
padding控制的是子元素在父元素里面的位置关系，可以给中间栏加一个父元素，然后用padding将子元素挤到中间，不占据左右两栏的位置。

     *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;
            background:purple;
        }
        .left{
            width:200px;
            height:100%;
            background:pink;
            float:left;
        }
        .right{
            width:200px;
            height:100%;
            background:#dd0;
            float:right;
        }
        /* 中间的板块 */
        .center{
            height:100%;
            background:red;
            /* 用padding 把center的子元素挤到中间 */
            padding:0 200px;
        }
        .center-con{
            height:100%;
            background:#ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <div class="center-con"></div>
        </div>``