爲什麼文本或圖像不放置在浮動元素後面？

Question

爲什麼文本或圖像不放置在浮動元素後面？

在此鏈接：http://codepen.io/anon/pen/LVWmvp，你可以看到這個例子。 「藍色」div位於「transp」div的後面。 但事情是，文本（或圖像）也不放在「transp」div的後面。請注意，p標籤是在「藍色」格。

所以我的問題是：爲什麼會發生這種情況？爲什麼文本不像他的父母那樣被放在「transp」div之後？

我一直在尋找答案。但我無法找到解釋這種情況的東西。

你能幫我嗎？ :)

這是你會發現codepen.io代碼： HTML

<div id="transp"> 
</div> 

<div id="blue"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dolor scelerisque, pellentesque arcu sed, vehicula enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis felis eros, accumsan eget erat non, vulputate blandit urna. Sed consequat nibh vitae lectus tempor viverra. Quisque condimentum, elit id pretium accumsan, quam nunc faucibus risus, id tincidunt massa est in turpis. </p> 
</div> 

CSS：

#transp{ 
    border: 1px solid #000; 
    height:200px; 
    width:200px; 
    float:left; 
} 

#blue{ 
    background-color:#00ffff; 
    height:200px; 
    width:600px; 
} 

這是你會看到：

Answer 1

的浮動點是將一個對象放在旁邊的一段文字或其他內聯c意圖，這樣的內容將流向約它。從spec：

浮子是被移位到左邊或右邊在當前行的盒子。浮動（或「浮動」或「浮動」框）最有趣的特徵是內容可能沿着其側面流動（或者被「清除」屬性禁止這樣做）。內容沿着左浮動框的右側向下流動，並沿右浮動框的左側向下流動。

讓文本忽略浮動將會失去完全浮動的目的。

從正常流程中刪除浮動，這就是爲什麼「藍色」div定位好像浮動元素不在那裏。因此，任何垂直流過浮動元素的文本都將直接從下面開始，而不是在那裏留下空隙。你可以看到這個，如果你讓你的div更窄和更高（或刪除高度聲明）。

Answer 2

簡單的回答：因爲你有#transp上的float:left。這樣做會告訴瀏覽器#transp應該在正常流程的左側，強制任何後續的塊元素（div）在左邊容忍它。實際上，#transp變得像內聯元素，但具有大小。

這是在display: inline-block出現之前使物體連續流動的方式。現在，使用更高級的CSS技術，浮點數通常被認爲是不好的佈局練習，所以應該避免與表格一起使用。