左右布局

一列固定宽度，另外自适应宽度
一般情况下，最简单的方式时浮动元素+普通元素margin

image.png

aside需要一个固定宽度，高度由里面元素自动撑开，布局方式从左到右。所以必须要有浮动，如果没有浮动，这两个都是块级元素，content在aside下方。
给aside加上浮动以后，给content加上一个margin-left，把左侧空间腾出来.content必须清除浮动加上clear：both等等。否则的话footer就会上扬（没有伪类占空间）
对于浮动元素的渲染，需要模拟浏览器的渲染方式

image.png
如果先读取main，因为是块级元素，会把整行占满，aside自然到下一行开始往右浮动，所以渲染顺序不一样，导致结果不一样

圣杯布局

---

原理大致是这样的：采用负边距使得浮动元素达到预设的位置后，再使用padding使得两侧留出空白区域待左、右边距占用，然后再使用相对定位使得左、右边距能够流向预定的位置。

第一步：先写出html代码

    <div class="bd-3-lr">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>

        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>

注意的是，父元素的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。并且设置其自适应为width:100%。
第二步 写css样式
（1）main ,左 ,右三个区块都设置左浮动，父元素清除浮动，main区块设置100%，左右两区块需要定宽，比如200px;
（2）左区块设置margin-left ：-100%,使其覆盖main区块的左边区域。这个-100%是以mian的宽度砍掉两边的padding值后的宽度
（3）右区块设置margin-left ：负自身宽度,使其覆盖main区块的右边区域。负边距起始位置也是main砍掉右边的padding的位置起算。
（4）main自身加padding 。.main{ padding: 0 200px;} ，让父容器的3个区块往中间挤。
（5）用相对定位position:relative,leftright.让左右两个区块在不脱离文档流的情况下偏移位置，拉出自身宽度，覆盖到父元素的padding上。同时保证左右两区块移动时候不遮挡中间。

Paste_Image.png

双飞翼布局

---

双飞翼和圣杯也是先设置三栏元素全部float，左右两栏添加负边框让其和中间元素挤在一行。圣杯用的是padding和相对定位，双飞翼的不同是，比如双飞翼的main中多了一层div嵌套，把margin拿到内层上去，在内部嵌套中设置左右margin，然后另外两个模块分别用负边距拉到指定位置。

Paste_Image.png