相信大家对于float都不陌生，float:left:向左浮动，float:right:向右浮动嘛。但是，它具体是什么情况，什么个意思呢？

昨天，刚学习了圣杯布局，从而对之有了进一步的理解。

首先，让我们来了解下什么是文档流和脱离文档流。

百度搜索过：

• 文档流：英文原版文档为"normal flow"，翻译成常规流、普通流也就更好理解它了。从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。如图所示：

• 脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。如图所示：
  css样式： .item{float: left; }

昨天老师是这样教我们理解的:文档流就好比我们去食堂排队打饭一样，一个接着一个往后排。脱离文档流呢，就好比队伍中的一人被拎出来了。

那么，我们的float就有使元素脱离文档流的这个效果了。

理解了以上的小知识，就让我们来了解一下什么是圣杯布局吧？

圣杯布局:为了提高用户的体验，让最重要的东西在第一时间加载出来。正如我们平常看到的网页：中间是我们需要的内容，而内容两端，则呈现一些广告啥的......

圣杯布局就是利用我们的float属性，将我们的“广告”布置在主要内容的两侧。效果如图所示：

我们两侧的内容left,right本来是按照文档流的形式排列在main内容的下面的。但当我们对left设置如下属性:

float: left;      margin-left: -100%;      position: relative;      left: -200px;复制代码

我们的left 就会位于main的左侧啦；

对于right：

float: left;       margin-left: -200px;      position: relative;      left: 200px;复制代码

我们的right就位于main 的右侧了。

这就是所谓的圣杯布局，这就是float的神奇之处。