圣杯布局和双飞翼布局原理，清除浮动原理

 圣杯布局和双飞翼布局的好处

​        三栏布局，中间的内容栏最先加载和渲染。

​        两侧内容固定，中间内容随宽度自适应。

<style>
        #content{
            padding-left: 200px;
            padding-right: 150px;
        }
        #content .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }
</style>
<div id="content">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
 </div>

为什么要把center放最上面？

​        因为中间栏要放在文档前面以优先渲染。放中间也是可以实现的，具体实现方式自己思考。

为什么不能用absolute？

​        float已经脱离文档流了，设置absolute会导致float失效。

为什么right的盒子设置margin-right为负宽度就可以不换行？

​        我们先思考一下float换行的原因，float换行的原因是由于上一行的空间已经无法容纳下一个盒子了，而元素页面展示的完全宽度等于margin + padding + border + width，设置margin-right为负宽度值就欺骗浏览器这个盒子只占0px，可以留在上一行。

<style type="text/css">
    .col {
        float: left;
    }

    #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
    }
    #main-wrap {
        margin: 0 190px;
    }

    #left {
        width: 190px;
        height: 200px;
        background-color: #0000FF;
        margin-left: -100%;
    }
    #right {
        width: 190px;
        height: 200px;
        background-color: #FF0000;
        margin-left: -190px;
    }
</style>
<div id="main" class="col">
    <div id="main-wrap">
        this is main
    </div>
</div>
<div id="left" class="col">
    this is left
</div>
<div id="right" class="col">
    this is right
</div>

​       双飞翼布局比圣杯布局简单，更好理解。

​手写clearfix

.clearfix:after{
    display:block;
    height:0;
    content:'';
    clear:both;
    visibility:hidden;
}
.clearfix{
    *zoom:1;
}

原理

​        clear:both;是清除浮动的关键。clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素，只在块级元素上起作用。（在IE8以下，还需要设置zoom:1;，会触发hasLayout，从而使元素获得清除浮动的特性）

还有其它方式嘛？

​        1、额外标签法，在最后一个浮动标签后，新加一个标签，给其设置clear:both;，跟上面最常见的伪元素写法其实本质相同。

​        2、添加overflow为hidden或scroll，内容多时会影响外观和体验。

​        3、利用BFC的“浮动元素也参与高度的计算”这一渲染规则。