前端布局之圣杯布局

今天学习圣杯布局，以下是自己的总结和练习。

圣杯布局

圣杯布局是一种三列布局，两边定宽，中间自适应的布局。
圣杯布局的原理:
当子元素处于浮动状态时，设置负margin，子元素会覆盖到兄弟元素上

方法一： 利于BFC元素与浮动元素不会相互覆盖的特性实现圣杯布局。

先写出三个盒子：

	<div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

清除样式，添加宽高和背景色

		*{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 220px;
            height: 100px;
            background-color: blue;
        }
        .center{
            height: 100px;
            background-color: yellow;
        }
        .right{
            width: 220px;
            height: 100px;
            background-color: red;
        }

现在三个盒子出来了，然后给左盒子添加左浮动，右盒子添加右浮动。