CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥？？太难了

本文链接：https://blog.csdn.net/qq_44280574/article/details/108325725

1.如何实现一个三列布局
【网页中常用的布局方式，中间是网页的内容主体，两侧是两个边栏，放置一些导航呀，广告呀，新闻呀等等】
实现一个左中右布局
左右两侧宽度固定
中间内容宽度能够自适应

圣杯布局略掌握一个就好~

2.双飞翼布局！！！
【很厉害，专门用于解决上边那种布局难题的。
也是大厂面试中经常考察的知识点。】
第一步：使用float属性让左中右三列浮动
第二步：使用负margin属性让左右两列与中间列处于同一水平线上
第三步：在中间列增加一个div内容元素，设置margin值为左(left)右(right)两列的宽度
最后，别忘了清除浮动，让父元素高度正常显示

双飞翼布局的优点：
1.中间内容列宽度自适应
2.中间内容区域优先加载
（因为，我们把中间列放在了第一个子元素的位置，它的左右都在其下边）
3.使用浮动布局
4.巧妙使用负margin属性保持三列水平
（我们设置了center 的 width: 100%; 左右两侧会被挤下去，因为他们三列都是浮动的嘛）
5.方法简单直接
6.浏览器兼容性好

例子1-进行到，双飞翼布局的第二步设置负margin
基本实现了上述三列布局-但是，center被left和right遮挡了，因为center的宽度和整个父容器的宽度相等的。【

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局demo2</title>
    <style>
        .container {
            border: 1px solid #000;
            width: 800px;
            /* 居中显示 */
            margin: 0px auto;
            overflow: hidden;
        }
        .center {
            float: left;
            background: yellow;
            width: 100%;
        }
        .left {
            float: left;
            background: green;
            width: 200px;
            /* 为啥呢？？ 
            因为center写在  前那边，在流里，它也是在前边
            并且设置了 center width: 100%; 
            所以这里设置vmargin-left: -100%;
            这样就相当于【在 流中（800px宽度）左移动800px 】,看上去left就贴着container 在左边了
            这样left就会和 center在同一行了,并且在左边
            */
            margin-left: -100%;
           
        }
        .right {
            float: left;
            background: pink;
            width: 200px;
            /* 为啥呢？？ 
            因为center写在  前那边，在流里，它也是在前边
            并且设置了 center width: 100%; 
            所以这里设置vmargin-left: 200px  200是其的宽度，;
            这样就相当于【在 流中（800px宽度）左移动200px 】,看上去right就贴着container 在右边了
            这样righ就会和 center在同一行了,并且在右边
            */
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

例子2-
双飞翼布局的第三步实现了-中间内容宽度能够自适应（随着container的宽度的改变，自适应改变-因为设置center 的width: 100%; 啦呀，，还有增加了content ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        .container {
            border: 1px solid #000;
            width: 900px;
            /* 居中显示 */
            margin: 0px auto;
            /* 消除塌陷 */
            overflow: hidden;
        }
        .center {
            float: left;/*  */
            background: yellow;
            width: 100%;
        }
        .left {
            float: left;/*  */
            background: green;
            width: 200px;
            height: 100px;
            margin-left: -100%;/*  */
        }
        .right {
            float: left;/*  */
            background: pink;
            width: 200px;
            /* height: 100px; */
            margin-left: -200px;/*  */
        }
         /* 第三步 */
        .content {
            /* 左右margin是 left 和 right 的width 200px  
            如果比200小  会遮挡center  
            如果比200大  会造成content内容区 和 left right 有距离 */
            margin: 0px 200px;
        }
        #kk{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <!-- 第三步 -->
            <div class="content">华为云1鹅，鹅，鹅，曲项向天歌。白毛浮绿水，红掌拨清波。。2鹅，鹅，鹅，曲项向天歌1。白毛浮绿水，红掌拨清波2。。3鹅，鹅，鹅，曲项向天歌。白毛浮绿水，红掌拨清波。。</div>
            <!-- <div id="kk">kk</div> -->
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>