this is text in span1 This is anonymous text before the p.

This is the content of p.

This is anonymous text after the p. this is text in span2 this is text in span3
这是对w3c的案例的一个修改
外层p元素产生一个块盒（同时也是块容器盒），内部依次排列了以下元素：span1,裸文本1，p,裸文本2，span2,span3
因为块盒内部只能包含一种盒子，要么是块级盒，要么是内联级盒。而内部的p创建了一个块级盒，所以：
外层P会为内层p前面的span,裸文本1，创建一个"匿名块盒"，包裹他们；而p后面的裸文本2，span2,span3,会被包裹在另外一个"匿名块盒"中
这样就有了3个块盒，他们垂直排列
而每一个块盒内部，创建一个IFC,将内容进行水平方向的排列。
span 里的文本 可以 分成多行因为它是个行内盒。
"可以分成多行因为"这几个字，默认是inline的，所以参与IFC(行内格式化上下文),所以是一个行内盒
当宽度缩小的时候，可以看到文本被换行
span 里的文本 不能分成多行 因为它 是个行内块盒（原子行内级盒：atomic inline-level boxes）。
"不能分成多行因为它"这几个字，display设置了inline-block,所以他是一个"原子行内级盒"
这种盒子不参与IFC,所以被当做一个"原子"看待，要么在上面一行，要么放在下面一行

我是不在inline元素内的裸文本1 我是在em标签内的文本，我有边框，padding,margin,缩小宽度把我隔断吧！！ 我是不在inline元素内的裸文本2

外层p生成一个块盒
因为p内部并没有一个block-level元素，只有一个em元素，和2段裸文本。所以p会先为em生成一个行内盒，
然后再为2段文本各自生成一个"匿名行内盒"，他们都参与IFC，所以宽度变小的时候，他们可以换行
可以看到，"匿名行内盒"无法被css选择器选中，但是他们可以继承父亲的样式(比如这里的字体色)
注意：边框显示交叉了，但是边框并不是"行盒"的,而是他内部包含的inline-box的，所以可以看到堆叠的"行盒"的边框虚线交叉
对于一个"行盒"来说，他的高度是计算inline-box的line-height.(对于可替换元素，或者inline-block元素，才是其margin box高度）
i make a new BFC, so my height contain my child ^_^,but absolute child not in >_<
float
absolute
父亲的子节点有2个，1个浮动元素，另外1个是一个绝对定位的元素
因为绝对定位的子元素也创建了一个BFC,导致子元素的高度参与到子BFC的计算， 所以父亲盒子的高度无法包含子元素的高度
但是，如果尝试给父亲元素增加overflow:hidden 或者 display:inline-block 使得其创建一个新的BFC,就可以让父亲的高度绑定到新创建的BFC（而这个BFC的高度计算会包含内部的所有子元素、子BFC)
然而，会发现只有float子元素的高度被包含进入父亲，绝对定位的元素高度仍然没有被父亲包含，原因待查