1、两列布局：左边固定，右边自适应
左右两侧，左侧固定宽度 200px，右侧自适应占满。
方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间
// html 代码
// CSS 代码
方法2：左侧和右侧都采用 float:left 往左浮动，左侧宽度 200px，右侧宽度使用 calc() 函数实现，代码为：calc(100% - 200px);
// html 代码
// CSS 代码
方法3：采用 flex 实现，左侧固定大小，右侧设置 flex:1，即可实现自适应
// html 代码
// CSS 代码
2、三列布局：左右固定，中间自适应
左中右三列，左右各 200px 固定，中间自适应占满。
方法1：左侧和中间都采用 float:left 往左浮动，右侧往右浮动，左侧和右侧宽度都设为 200px，中间宽度使用 calc() 函数实现，代码为：calc(100% - 200px - 200px);
// html 代码
// CSS 代码
方法2：采用 flex 布局，左右两侧宽度固定大小，中间设置 flex:1，即可实现自适应
// html 代码
// CSS 代码
3、三行布局：上下固定，中间自适应
上中下三行，头部 200px 高，底部 200px高，中间自适应占满
方法1：使用绝对定位，把上面的和下面的分别设置top: 0; bottom: 0; 固定在上下两端，中间距离上下各 200px 即可。
// html 代码
// CSS 代码
方法2：采用 flex 布局，flex-direction: column; 上下两侧高度固定大小，中间设置 flex:1，即可实现自适应.
4、圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的，都是两边固定宽度，中间自适应的三栏布局（与三栏布局的区别是 dom 结构必须是先写中间列部分，这样可以实现中间列优先加载），中间栏要在放在文档流前面以优先渲染，即：
两侧内容宽度固定，中间内容宽度自适应。三栏布局，中间一栏最先加载、渲染出来。
4.1 圣杯布局（使用 float 布局框架 ， 用 margin 为负值 ， position: relative 定位）
实现步骤：
（1）三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置 middle（中间部分） 的宽度为 100% (实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行。 （2）通过设置 margin-left 为负值让 left 和 right 部分回到与 middle 部分同一行显示。
（3）通过设置父容器的 padding-left 和 padding-right，让左右两边留出间隙。 （4）通过设置相对定位，让 left 和 right 部分移动到两边。 代码：
// html 代码
// CSS 代码
内部元素都是左浮动的，主要区域宽度100%;左侧区域通过 margin-left: -100%;使它浮动到左方，然后根据自身定位 left：-200px;将之移动到父容器的 padding 中。右侧同理，只不过只需要 margin 自己本身的宽度。结果：左右固定宽度 200px，中间自适应。
4.2 双飞翼布局
双飞翼布局同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
双飞翼布局和圣杯差不多，主要是将 padding 换成了 margin 而且只需要包裹 middle 即可。
代码：
// html 代码
// CSS 代码
实现步骤(前两步与圣杯布局一样)：
三个部分都设定为左浮动，然后设置 middle 的宽度为100%，此时，left 和 right 部分会跳到下一行。通过设置 margin-left 为负值，让 left 和 right 部分回到与 middle 部分同一行。middle 部分增加一个内层 div，并设 margin: 0 200px。
缺点： 多加一层 dom 树节点，增加渲染树生成的计算量。
4.3 两种布局实现方式对比
两种布局方式都是把主列放在文档流最前面，使主列优先加载。两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位。双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。
推荐使用双飞翼布局。
5、布局常用方法
Flex 布局栅格布局使用 BFC 隐藏属性float + marginabsolute + margin圣杯布局双飞翼布局