一直以為float就是脫離文件流那麼簡單，自己寫了些測試**，發現水這麼深尼瑪，一句話，慎用float。
在塊級元素中使用了浮動元素，如3個div，第乙個div浮動，後面兩個div會往上擠，就當上面的div不存在一樣，這時候，浮動元素後方的div會鑽到浮動元素下面，顯示就是被浮動元素遮擋了。真的就那麼簡單了嗎？
當我在浮動元素後面的非浮動元素中加了一些文字啊啊，詭異的現象出現了，雖然和浮動元素相鄰的非浮動元素還是會鑽到浮動元素下面，但是文字等行內元素不會！他們會被留在浮動元素外面，表現上是環繞著浮動元素的效果。
說完現象，說說原理，查了不少資料，靠譜的沒幾個，肯定的是float會把inline box毀掉造成高度塌陷云云，但這不是這個問題的答案，為什麼文字會環繞，但是div不會呢？
乙個靠譜點的說法是，float不會佔據和他相鄰的非浮動元素，但是會佔據和他非相鄰浮動元素裡面的inline box空間，就是說會把裡面的東西擠出來，但是會覆蓋那個元素本身如背景啊邊框啊神馬的。再往裡的原理深究起來很囉嗦，拿點別人的東西過來，不過記住這個特性是很重要的。
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...
常見行內 塊級 行內塊級元素
1 元素分類 一 塊級元素 block element 獨佔一行，可以定義寬高。二 內聯元素 也叫行內元素 inline element 不獨佔一行，無法定義寬高。三 內聯塊級元素 inline block element 不獨佔一行，同時可以定義寬高。2 常見內聯元素 strong em del ...
行內元素 塊級元素和行內塊元素
a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...