第31页 可视化格式模型

看到float那块完全被卡住了，本来想跳过，后来想定位（区别于布局）这事必须要搞懂，又想起来正好是之前看到的一篇文章：http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/ 
里面涉及的内容，就好好了解了一下。主要是通过以下文章又进入了一个新阶段，也了解了很多术语。
http://www.jb51.net/css/67471.html

    本来一直一位定位分成绝对和相对定位，后来才发现这样分类是不对的，正确的方法是：
    1. 常规流(Normal Flow)
    2. 浮动(Float)
    3. 绝对定位(Absolute Position)
    对于后面两种定位的主要区别看了以下知乎这个帖子http://www.zhihu.com/question/19588854 发现传统的还是float比较合适。

 
    用浮动元素的一个大问题是：当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象），导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。解决的方法主要是：

    1. 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素； 
     2.通过设置父元素 overflow 或者display：table 属性来闭合浮动，主要是利用 Block formatting contexts （块级格式化上下文），以下简称 BFC。（CSS3里面对这个规范做了改动，称之为：flow root）这里的BFC很类似IE里的 hasLayout，主要的介绍就百度百科了一下
http://baike.baidu.com/link?url=HYth1hSJdIvhgr9sL_NWu2ZX2Fqev82zhTd_2U7P09wClhdg04JLk48WMyNgHZhEhGYgACdtYJ76HO2Mk92S1a  还根据这篇文章了解了以下出发条件：
http://www.cnblogs.com/ideaplusl/archive/2011/07/07/2099843.html
大致我认为就是出发了hasLayout之后，这个块级元素就要负责他的子元素的定位，而不是通过其他的同级元素来定位自己，因此撑起了自己内部的大小。

答案暂定为：
<div class="item">
  <div class="pic">...</div>
  <div class="content">...</div>
</div>

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table


 
BFC的特性为： 
1)块级格式化上下文会阻止外边距叠加 
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。 
2)块级格式化上下文不会重叠浮动元素 
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。 
3)块级格式化上下文通常可以包含浮动 （就是这里，因为它自身包含了浮动所以高度被撑起来了。）

关于BFC更细致的解释在这里，马一下，暂时实在看不下去了。。。http://www.html5jscss.com/box-context-78.html