【css】圣杯布局

摘要：经常在网站上看到，左边是目录，右边放一些备注啊，广告之类的。后记记录这里的第一篇文章，花了一个下午写出来的。

这是一种比较常见的网站布局，此布局为两边等宽，中间自适应的三栏布局。经常在网站上看到，左边是目录，右边放一些备注啊，广告之类的。

这里主要涉及到float,margin,定位；

浮动元素会生成一个块级框，而不论它本身是何种元素;

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。（如图：两个inner浮动后一行排列不下，就会自动换行）

浮动元素不能把未定义宽高的父元素撑开，需要做一步清除浮动的操作

清除浮动 增加一个标签，css属性设置 clear: both; 或者父元素 overflow: hidden;

margin-left: 是元素左边框距离父元素左边框的距离

这个正常设置10px等这些具体的值都好理解，但是也可以设置百分比，百分比是相对于父级元素的比例，如下: 父元素灰色的 (200*200)，子元素粉色(100*100)；

当值为负的时候，是距离父元素左边框往左的距离；

margin-left: -100%;是往左偏移父元素宽

这里主要了解相对定位（relative）：相对定位元素会相对于它在正常流中的默认位置偏移。

先上代码，然后预览一下效果；