問題描述：
乙個塊元素裡 有 兩個元素 第乙個設定了浮動 那麼第二個不應該在 第乙個的下面嗎？
結果顯示:
兩個span是緊挨著的。（源**和瀏覽器視窗顯示圖形如下）
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
.box
.box .one
.box .two
style
>
head
>
>
class
="box"
>
class
="one"
>
onespan
>
class
="two"
>
twospan
>
div>
body
>
html
>
加float屬性的盒子會脫離正常文件流，通俗一點來講就是飄起來了。
後面的正常盒子（分三類：塊級元素、行級元素和行內塊級元素）會移動到浮動盒子的下面。
根據前面講到的浮動的元素還是會占有正常文件流的文字空間（該盒子裡面的文字不脫標，即盒子浮起來，但文字不浮起來。不管文字多少，都要給它盒子大小的空間），因此在浮動盒子的下方不允許再出現其他盒子的文字。
① 對於後面的盒子是塊級元素：
這個不難理解，塊級元素的盒子會跑到浮動盒子的下面，但是當該盒內有文字時，文字會跑到浮動盒子外面空間進行顯示。
（即，你可以占有我浮動盒子的位置，但你的文字不能在我的位置顯示。）
② 對於後面的盒子是行級元素：
如果盒子是空的，也會跑到浮動盒子的下方（相當於什麼也沒有，沒有存在的意義），可一旦給盒子設定邊框或新增文字時，由於「盒子即文字，文字即盒子」，文字要在浮動盒子外面顯示，所以該盒子也就會跟著在外面。
③ 對於後面的盒子是行內塊級元素：
原理同②，只不過可以給盒子即文字設定寬高而已。
（舉個例子： 後兩種情況就像蝸牛?一樣，肉體和殼不分離。行級元素就像死去的蝸牛，大小固定，你多大，你的殼就多大；行內塊級元素就像活著的蝸牛，大小不定，有小蝸牛也有大蝸牛。）
標準文件流 浮動
定義 內容從左到右，從上到下書寫的。前面的內容大小或者位置發生變化時，後面的內容位置也會隨之變化。web頁面，就是乙個標準的文件流。內容跟咱們的書寫順序有關。1 空白摺疊現象 無論多少個空格，tab，換行都會摺疊為乙個空格。張老師 真帥 2 高矮不同，底部對齊 妖怪我要你助我修行 3 一行寫滿，自動...
CSS脫離文件流 浮動
什麼是文件流？將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文件流，也稱為普通流。這個應該不難理解，html中全部元素都是盒模型，盒模型占用一定的空間，依次排放在html中，形成了文件流。什麼是脫離文件流？元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態 可以理解為...
浮動的影響與清除浮動
影響1 div1 div2 div3,要實現dev1 div2 在第一排顯示，div3另起一行？方法 給div1 div2加浮動，1和2會脫離正常流，因為div3屬於正常流會上到第一排，並且被1和2覆蓋 就是為什麼要清除浮動，消除浮動影響 方法1 加乙個空div，clearfix 在div3前加乙個...