div框中的字為什麼不會跟著div框一起浮動？

在練習浮動的時候發現了這麼一個有趣的問題，希望大神看見能給予說明，先謝過。

做了三個div框，每個框中都有若干個字用以分辨各個框。我對第一個div設置了浮動，然後第二個div框就上去了，但是框里的字還留在原來的位置上。我想不通這是為什麼。附上代碼和現象。

---

float設計最初的主要效果和功能就是要讓文本環繞圖片，如果給塊狀元素設定float，就是文本環繞塊狀元素呀~

那就說說浮動元素和其他元素重疊時候的顯示情況吧：

1. 與行內元素或行內塊元素重疊的時候，環繞在浮動元素周圍，情景：span標籤內的文本環繞圖片。
2. 與塊狀元素重疊的時候，塊的背景邊框會在浮動元素下面，但是塊中所包含的行內塊元素和行內元素仍然會環繞在浮動塊元素周圍，情景就是題主的例子。

來段權威的

浮動會讓元素脫離文檔流，不再影響不浮動的元素。實際上，並不完全如此。如果浮動的元素後邊得有一個文檔流中的元素，那麼這個元素的框就會表現得像浮動根本不存在一樣。但是，框的文本內容會受到浮動元素的影響，會移動以留出空間。用技術術語來說，浮動元素旁邊的行框被縮短，從而給浮動元素留出空間，因此行框圍繞浮動框。

摘自——《精通CSS：高級Web標準解決方案（第2版）》Page49 行框與清理

這裡的框可以理解成塊狀元素，行框可以理解成行內塊元素和行內元素。

---

.a{
background-color:red;
}


.a{
background-color:red;
}
.b{
height:200px;
}


.a{
background-color:red;
}
.b{
height:200px;
width:150px;
}


.a{
background-color:red;
position:relative;
top:20px;
}
.b{
height:200px;
width:150px;
}


.a{
background-color:red;
position:relative;
top:150px;
}
.b{
height:200px;
width:150px;
clear:left;
}


.a{
background-color:red;
position:relative;
top:0px;
}
.b{
height:200px;
width:150px;
clear:left;
}


-----------------------------------------------

---

文字明明跟著浮動了啊！你設置的是第一個div浮動，第一個div上的文字跟著走了，怎麼說沒浮動呢？第二個上的文字其實也跟著第二個div動了，只是因為div的太小，被第一個div擠出來了，你把第二個div改大就知道，字到了浮動的div的右邊去了，因為div浮動也是要佔位置的。

---

瀉藥

導致原因不知道。。。。。

--------------------------------------------------

好吧，其實float導致的bug會經常出現，所以用float要謹慎。

解決辦法，就是盡量不要那麼設置float，如果想要達到某種效果，就多寫幾層div來包裹。

你這個最直接的解決辦法就是把文字用div包裹起來，然後給這個子div設置position: absolute，外層div設置position: relative;只是這樣設置真的很怪。

-------------------------------------------------

既然寫到這了，我也就瞎白活白活吧。

導致這種情況的原因，我覺得得從文檔流的角度入手，因為float是一種破壞文檔流的樣式，他是把要浮動的元素從當前文檔流里提取出來，然後做為新的文檔流。

在chrome或谷歌里，瀏覽器解析的時候可能是把當前的浮動元素從文檔流里抽出來了，其他元素的「div外框」遵從新的文檔流，但是框內內容卻依然遵循老的文檔流里的布局規則。

在本例中就是：a元素被float抽出來了，成為新的文檔流，然後b與c的「div框」就往上頂了，但是b、c的內容都被a擋在外面，因為不加float的時候，b的內容最高也只能到b的頂端，他不能跑到a元素里，b的內容就默認為a的div是他的最高邊界，同理，c的內容會認為b是他的最高邊界。

說的有點繞口，把你的代碼擴展一下吧：

& div {
width: 200px;
color: #000;
}

.a {
float: left;
height: 500px;
background-color: #0f0;
opacity: 0.8;
}

.b {
height: 100px;
background-color: #00f;
opacity: 0.8;
}

.c {
float: none;
height: 150px;
background-color: #f00;
opacity: 0.8;
}

.d {
float: none;
height: 200px;
background-color: #ff0;
opacity: 0.8;
}
& &1111111111111111111& &2222222222222222222& &3333333333333333333& &4444444444444444444&

圖：

float前

float後

你看，b、c、d的內部元素都被a擠在下面。所以加了float，外框與內部遵從的是兩套文檔流標準。具體你可以搜一下css float原理。說實話，文檔流這個東西我也不知道具體是啥含義。。。以上我說的都是猜測，不敢保證對錯，而且也只是部分瀏覽器里的一種現象，寫出來只是作為一種樂趣，不作為參考。即便你研究明白了貌似也沒啥用。。。

所以，根本上還是避開為妙。

---

雖然我也是剛學不久的菜鳥，但我可以大概說說我的總結：盒子一浮動，脫離標準流，處於浮動流中。那麼在標準流中相當於沒有了盒子一，盒子二自然排到第一行。但是，浮動流中的盒子一會對標準流中的顯示內容有影響（應該是瀏覽器為了盡量把內容顯示出來吧）所以盒子二的內容會往下排版。又因為盒子二的內容是超出盒子二的，所以它的顯示等級比較低，盒子三的內容會覆蓋盒子二的內容。

---

使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。 出自——css脫離文檔流 - allensun - 博客園

---

聽說過相對定位嗎

---

這是圖不是字

---

推薦閱讀：