javascript - 文字为什么被挤到了边上而不是被覆盖？

Question

<p style="float:left; width:100px; height:100px; background:#000;">
</p>
<p style="height:200px; background:#AAA; width: 200px;">
    content
</p>

Answer 1

这个问题其实是在我的一篇关于BFC的博文结尾留下的一个思考题。
同样的情况下将文本内容 content 替换成一个块级元素，这个块级元素会被 float 的元素覆盖，而文本内容 content 则不会被覆盖。

http://jsfiddle.net/to4p3eza/embedded/html,result/

我们会发现文本内容的表现十分类似于 BFC 容器的表现，文本内容整体与外部元素保持独立，不会被浮动元素覆盖，那么是不是文本元素也形成了 BFC 呢？

上面的猜测已经非常接近正确答案，文本内容确实形成了格式化上下文，只是文本内容形成的上下文并非 BFC，而是 IFC(Inline formatting context, 行内格式化上下文)。

IFC 与 BFC 相同，对外部元素表现出独立性，因此文本内容与 BFC 有相同的表现，不会被 float 覆盖。

另外，IFC 是自动生成的，只要有行内元素存在，就会形成 IFC。所以文本内容自动形成 IFC，导致整个文本元素对外部元素表现出独立性，不会被浮动元素覆盖，这就是这个问题的答案。

IFC 除了独立性方面与 BFC 类似，对内部元素的处理与 BFC 大相径庭，想要进一步了解的话可以自行搜索学习。

Answer 2

那你把第一个浮动的改为绝对定位在上面就覆盖了

<p style="position:absolute;left:0;top:0; width:100px; height:100px; background:#000;z-index:5;">
</p>
<p style="height:200px; background:#AAA; width: 200px;">
    content
</p>