<p style="width: 40%; background-color: #aa0000; float: left">
<p >
<p style="position: absolute">
111
</p>
<p style="position: absolute">
222
</p>
</p>
</p>
<p style="width: 20%; background-color: #00aa00; float: left">222</p>
<p style="width: 40%; background-color: #0000aa; float: left">333</p>
<p style="width: 40%;height: 100px; background-color: #aa0000; float: left">
<p >
<p style="position: absolute">
111
</p>
<p style="position: absolute">
222
</p>
</p>
</p>
<p style="width: 20%; background-color: #00aa00; float: left">222</p>
<p style="width: 40%; background-color: #0000aa; float: left">333</p>
怪我咯2017-06-30 10:00:16
你的第一個例子父元素是沒有設定高度的，子元素也沒有高度，所以不顯示。
position:absolute是絕對定位，脫離文檔流，而且你沒有設定top/right/bottom/left等值，所以同級的兩個p會重疊
黄舟2017-06-30 10:00:16
static：預設定位（即無定位，文件流怎麼排下來就怎麼定位）
relative：相對定位，相對於原始位置定位，所謂的原始位置，即static定位的位置
absolute：絕對定位，相對於static定位以外的第一個父元素定位。從當前元素開始向上尋找定位元素直至根元素，無論遇到的第一個父級元素是relative還是absolute，或者是fixed定位的元素，當前元素就相對於該元素進行定位，而這個父級元素不一定是目前元素的第一級父元素。如果沒有找到任何非static的父級元素，則相對於根元素html進行定位。
fixed：固定定位，相對於瀏覽器視窗定位
初學者記住上面這些就行了。
按w3school的說法：
設定為絕對定位的元素框
從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
絕對定位使元素的位置與文檔流無關，因此不佔據空間。
引用中的內容我認為確切的說法應該是“相對於最近的已定位的包含塊或初始包含塊”，因為如果說法是“相對於包含塊”，那為什麼一定要至少是relative的元素。 （應該去查w3c...衰）
什麼是包含塊？
containing block
css 包含區塊(Containing Box)
包含區塊是瀏覽器計算元素位置的一個虛擬的矩形區域，計算元素定位的起始位置是該矩形區域的左上角，也就是原點，座標位置為( 0,0)，定位元素的top、left相對於該原點確定。包含塊就是元素定位的參考系。
可以認為這個矩形區域就是創造它的元素，但不是這個元素，只是虛擬的一個東西。
<!-- p元素会创建一个包含块，用于计算p元素的尺寸和位置 -->
<!-- 可以认为包含块就是p元素 -->
<p>
<p>Hello word.<p>
</p>包含塊只是用來計算元素的位置和尺寸。
因為設定為position: absolute的元素脫離了文件流（normal flow），形成了獨立的BFC。
頁面中每個BFC都是獨立的一塊渲染區域，互不影響，但是它的位置信息，依然由它在normal flow中的包含塊決定。
所謂的流就是瀏覽器將元素在瀏覽器視口從上到下，從左到右一個一個的排版渲染出來，形成的一個類似水流一樣 的概念。
預設一個頁面只有一個“流”，就是文檔流（normal flow），如果頁面有定位元素、浮動元素，就會形成定位流、浮動流，而normal flow由文檔的根元素html形成。
流你可以認為是桌面上疊起來的一張紙，每一張紙都是一個“流”，只是這些紙不一定都是一樣的大小。
我對BFC的理解 - wmsj100
漂亮男人2017-06-30 10:00:16
這裡你將絕對定位和浮動混合在使用，不方便初學者理解。兩者應該分開更容易理解一些。
使用絕對定位的情況，要注意：
1.绝对定位absolute一般是要配合相对定位relative一起使用的。绝对定位到底是相对于哪个元素进行定位的，就给这个定位父级添加属性 position:relative;
要是没有设置这个定位父级，那么绝对定位的元素就会默认<html>是定位父级。
2.所有绝对定位的元素，一定要初始化top/left，即使是0，也要写上。top: 0; left:0;
3.绝对定位的元素相当于脱离了文档流，就不再占据空间了。所以自然也无法再撑起父级元素的宽高
<!-- 这个父级p是定位父级，那么添加属性 position:relative; -->
<p style='position:relative'>
<!-- 绝对定位元素初始化位置top/left -->
<p style="position: absolute;top: 0;left: 0">
111
</p>
<p style="position: absolute;top: 0;left: 0">
222
</p>
</p>
關於浮動float的相關理解要另行百度啦~