前端布局写法原理理解与总结+记忆（两栏布局、圣杯布局、双飞翼布局）

实现两栏布局

（左边固定，右边自适应，文档结构是一个父div包裹两个左右div，子元素height设置百分百自动撑满父元素）

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

可能有些初学者不知道为什么下面的方法就能形成自适应的效果，这里有一些小贴士希望能帮助你们理解：
1. 关于auto：width是auto会自动撑满父元素，height是 auto会自动匹配内容的高度。但是width auto与定位有很大的关系
结论：
【position:static（默认）/relative 】实际宽度（width+border+margin）等于父元素 width 值，与内容长度无关。

【position:absolute】实际宽度（width+border+margin）取决于其内容的长度，但是最大不超过该元素的第一个非 static 定位的父元素的 width 右侧边界；

【posiition:fixed】实际宽度取决于其内容的长度，但是最大不超出浏览器窗口。
2. height百分百会依据父元素的高度（前提父元素要有确定值的高）
（所以下面的所有方法都基于父元素有确定值的高以及子元素都设置了高度百分百）
3. 设置了float或者absolute会让元素脱离文档流。
4. margin-left: -100% 相对的是父元素的 content 宽度，即不包含 paddig 、 border 的宽度。

我自己的理解：
这些布局实现的核心原理其实就是先让左元素脱离文档流，右元素因为没有设置width（默认值是auto）所以会自动撑满父元素。但撑满之后会与已经脱离文档流的左元素发生重叠，于是就用margin-left或者绝对定位时的left制造一个假留空，这样这个布局就完成了。

1. 浮动法1，故意留空法：

左边div设置向左浮动2.因为width默认是auto，会自动撑满福元素。记得把左边的宽度固定设置一下。3.右边的div marginleft设置为固定宽度。**（其实就是用了浮动不占据文档流，然后故意留出空位，假占据文档流）**

2. 浮动法2，生成bfc与浮动元素并排法：

原理就是不再设置marginleft，反而用overflow: hidden来生成bfc，bfc不会与浮动元素发生重叠，同样使用width默认auto撑满父元素的原理，左边还是要固定一下宽度

3. flex法：

父元素开启flex，左边元素宽度固定，右边开启flex: 1

4. 绝对定位法1，左边元素绝对定位：

左边元素设置绝对定位后同样不占据文档流，但不要让它以body为标准，将父元素设置相对定位，使子元素的绝对定位以父元素为标准，与浮动法的原理一样，假留空就行。

5. 绝对定位法2，右边元素绝对定位：

在父元素设置了相对定位的前提下，左边元素固定宽度，右边元素开启绝对定位脱离文档流，然后用left设置假留空就行，记得top bottom right 都设置0

实现双飞翼布局、圣杯布局

实现目的：

• 三栏布局，中间内容优先加载和渲染。
• 两侧内容固定，中间宽度自适应。
• 一般用于 PC 网页。

圣杯布局和双飞翼布局的技术总结：

• 使用 float 布局。
• 两侧使用 margin 负值，以便和中间内容横向重叠。
• 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

<div id="container" class="clearfix">
  <p class="center">我是中间</p>
  <p class="left">我是左边</p>
  <p class="right">我是右边</p>
</div>