网页布局--自适应

CSS很多人都会写也用的很溜，毕竟这是一门描述性语言，不需要太多的语法，算法知识，上手非常容易，因此遭到很多人轻视，但用好CSS真的不是一件很容易的事，常见的自适应布局就很考验技能，你不光要会写，还得懂内在原理。

前端面试都会考到圣杯布局，以前写过很多次，但一直没做个总结，以至于每次别人问都不能很好的表述，下面做个整理，先来看看HTML，CSS结构

方法一：

html,body{ margin:0px; padding: 0px; height: 100%; }
body div{ height: 100%; }
.left{ width: 150px; border:1px solid red; float: left; }
.right{ width: 150px; border:1px solid red; float: right; }
.main{ background-color: gray; overflow: hidden; }

<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div><!-- 一定要放在最后 -->

这里用到几个知识点：

1、浮动元素会以某种方式脱离文档流（absolute，fixed定位也会导致元素脱离文档流），不过还是会影响布局（表现就是内容会环绕该元素）

2、如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶部不能比包含该元素所生成框的任何行框的顶端更高

3、BFC区域不会和float 重叠

有了以上几点，就能明白用户代理是如何布局的

首先.left元素往左浮动，然后.right往右浮动，因为浮动会导致元素脱离文档流，.mian元素就无视他们的存在，左右边界直接延伸到两个浮动元素的下面（我们要的显示不是这种延伸），然后给.main元素触发BFC，使.main区域不和float重叠，三栏自适应布局就此生成。

这里要特别强调的是.main元素一定要放在最后，第二条知识点已经明确说明，不这样放会导致其中一个浮动元素出现在.main元素的下方

方法二

html,body{ margin:0px; padding: 0px; height: 100%; position: relative; }
body div{ height: 100%; }
.left{ width: 150px; border:1px solid red; float: left; }
.right{ width: 150px; border:1px solid red; float: right; }
.main{ background-color: gray; overflow: hidden; position: absolute; left: 152px; right: 152px; }

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

这种方法就简单多了也很好理解，用到了定位的相关知识点

1、absolute元素会脱离文档流

2、left值定义了定位元素左外边距边界与其包含块左边界之间的偏移

3、right值定义了定位元素有外边距边界与其包含块右边界之间的偏移

给.mian元素left，right偏移，width默认值为auto，这里不做设置，由用户代理进行计算，从而实现三栏自适应布局