【常见的页面布局(两栏布局、三栏布局)】

两栏布局,左边定宽，右边自适应

列举以下案例，复制代码，看效果就完了

(1) 左边左浮动，右边添加一个oveflow:hidden;就变成BFC清除左侧浮动元素的影响

//html  
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>

//样式
 .left{
    float: left;
    width: 200px;
    background: green;
}
.right{
    overflow: hidden;
    background: red;
}

三栏布局,圣杯布局、双飞翼布局

圣杯布局和双飞翼布局都是用来做三栏布局的，左右定宽，中间自适应

要是这两个布局的话首先需要具备：

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 只需要使用一个额外的<div >外层标签

圣杯布局

原理：

为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div

效果如下：

dom结构

<div class="HolyGrail">
    <header>#header</header>
    <div class="wrap">
      <nav class="left">left 宽度固定200px</nav>
      <main class="content">center 宽度自适应</main>
      <aside class="right">right 宽度固定200px</aside>
    </div>
    <footer>#footer</footer>
  </div>

css样式

  .HolyGrail {
    text-align: center;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
  }
  .HolyGrail .wrap {
    display: flex;
    flex: 1;
  }
  .HolyGrail .content {
    background: #eee;
    flex: 1;
  }
  .HolyGrail .left,.HolyGrail .right {
    background:lightgreen;
    flex: 0 0 200px;
  }
  .HolyGrail header,.HolyGrail footer{
    background:#999;
    height: 50px;
    line-height: 50px;
  }
  .HolyGrail .left {
    background:salmon;
  }

双飞翼布局

效果图如下：

dom结构

<div>
        <div class="head">我是头部</div>
        <div class="middle_container">
            <div class="middle">我是中间</div>
        </div>
        <div class="left">我是左边栏</div>
        <div class="right">我是右边栏</div>
        <div class="footer">我是底部</div>
    </div>

css样式

   * {
            margin: 0;
            text-align: center;
        }

        .head,
        .footer {
            width: 100%;
            height: 100px;
        }

        .middle_container {
            width: 100%;
        }

        .head {
            background-color: aliceblue;
        }

        .footer {
            clear: both;
            background-color: antiquewhite;
        }

        .left,
        .right,
        .middle_container {
            float: left;
            height: 150px;
        }

        .left,
        .right {
            width: 100px;
        }

        .left {
            background-color: aqua;
            margin-left: -100%;
        }

        .right {
            background-color: brown;
            margin-left: -100px;
        }

        .middle {
            background-color: chartreuse;
            margin: 0 100px;
            height: inherit;
        }