100%会问的float？

相信你们对于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的神奇之处。