收获：

关于float（浮动）的理解：

昨天用float＋clear很快就写出了九宫格的图形。但我还是有着深深的疑虑，网上给出的方案有两种，一种是用块级元素来排列，一种是用float的浮动布局，但是两种方案总有优有劣吧。

于是，我去查了《CSS权威指南 第3版》中的第10章：浮动和定位

因为是带着目的和需求前去查找资料的，于是我对这一章粗略的浏览了一下，想找到float＋布局这样两个关键字再细细阅读。但是通篇看完，结果令我大吃一惊。

整个浮动的章节，从头到尾全都是在讲文本环绕这个功能，中间讲了大量的浮动在做文本环绕这个效果的时候的各种处理细节。我从中得出的结论就是，浮动模型压根就不是用来做网页整体布局用的，它完全就是用来写文本环绕的。原因？在之后的定位这一章里面，介绍各种各样的页面布局怎么来实现，以及背后的原理。

想来。。。我之前上网看得许多的介绍html＋css的教学视频里面教人写网格布局的时候，上来就是float：left，真的是够啃爹的。

但是以上的所有的结论都是建立的《CSS权威指南 第3版》这本书是业内公认的一本权威指南的前提，虽然如此，碰到一个陌生的点，就应该要去了解透彻，于是我根据http://www.w3cplus.com/css/float.html这个网站上介绍的float模型详细的了解了float的原理。

在这里我简单的，整理了一下看完之后的脉络：

由于float压根不是解决网页布局的，所以float使元素脱离文档流，使父元素塌陷这种特性也就不用怎么吐槽了。

由于float致力于解决文本环绕，所以我们可以从float对其父级元素的影响，对非浮动兄弟元素的影响，对同为浮动兄弟元素的影响，以及对包含的子元素的影响四个方面来整理。

讲的简单的也就是，

当我写完

<div style="float:left">

      <div style="float:left">162</div>

      <div>162</div>

</div>

<div></div>

这样一段的时候，我们脑子里面应该很清楚，这上面的四个盒子，应该是怎么样排列的，真正的文档流是哪几个div，第一个float包含的两个子块应该是什么样子的。

具体的整个学习笔记应该要放到晚上，专门写一个详细的博客了。

现在的话，要告别啃爹的float好好看看block是个什么东西，这个玩意他怎么能够建立网格状布局了。