页面布局1234种

一、自适应布局，一列被内容撑开，一列补足剩下的宽度

.content {
    width: 1000px;
    height: 200px;
}
.left {
    float: left;
}
.right {
    height: 100px;
    /* 触发 BFC，不会与浮动的元素重叠 */
    overflow: hidden;
}

<div class="content">
   <div class="left">
     <p>宽度自适应内容宽度....</p>
   </div>
   <div class="right">
     <p>右侧盒子占有父级剩余的宽度部分....</p>
   </div>
</div>

二、圣杯布局\双飞翼布局

.container {
    position: relative; /*父元素相对定位*/
    box-sizing: border-box;
    max-width: 1500px;
    height: 300px;
    /* 用内边距为左右固定的两个子元素留取空位 */
    padding-left: 200px;
    padding-right: 200px;
    margin: 0 auto;
}
/* 定位在左侧，padding 区域 */
.left {
    position: absolute; /*父元素绝对定位*/
    left: 0;
    top: 0;
    width: 190px;
    height: 100px;
    }
/* 定位在右侧，padding 区域 */
.center {
    width: 100%;
    height: 200px;
}
.right {
    position: absolute; /*父元素绝对定位*/
    right: 0;
    top: 0;
    width: 190px;
    height: 200px;
}

<div class="container">
  <div class="center">
     <h2>中间自适应宽度</h2>
  </div>
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧固定宽度</div>
</div>

三、等高布局

.container {
    position: relative;
    box-sizing: border-box;
    max-width: 1500px;
    /* 父级不设置高度，被中间标准流内容撑开 */
    /* 用内边距为左右固定的两个子元素留取空位 */
    padding-left: 200px;
    padding-right: 200px;
    margin: 0 auto;
}
/* 定位在左侧，padding 区域 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 190px;
    /* 高度设置为父级的 100%，与父级共同变化 */
    height: 100%; 
}
/* 定位在右侧，padding 区域 */
.center {
    width: 100%;
    height: 200px;
}
.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 190px;
    height: 100%;
}

<div class="container">
  <div class="center">
     <h2>中间自适应宽度，自身高度决定父级高度</h2>
  </div>
  <div class="left">左侧固定宽度，高度自动等于中间内容高度</div>
  <div class="right">右侧固定宽度，高度自动等于中间内容高度</div>
</div>

四、粘连布局，适合长页面，首页，可向下滚动，包含底部模块

html,body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
    overflow: hidden;
}
.wrapper .main {
    border:1px solid skyblue;
}
.wrapper .main p {
    height: 500px;
}
.footer {
    height: 100px;
    margin-top: -100px;
    line-height: 50px;
}    

<div class="wrapper">
  <div class="main">
     <p>主体内容 1</p>
     <p>主体内容 2</p>
     <p>主体内容 3</p>
  </div>
</div>
<div class="footer">底部</div>

参考文章：[ IE浏览器兼容方法+几种网页布局]( https://blog.csdn.net/qq_43477251/article/details/120297707)