在我們平時工作中，經常會遇到把一些塊狀元素在一行排列顯示，這時候我們通常會用到flaot,或許會用inline-block等等，那麼他們有什麼共性和區別？適用在什麼場景？
共性：①inline-block: 是把乙個元素的display設定為塊狀內聯元素，意思就是說，讓乙個元素的容器inline展示，並且裡面的內容block展示；inline屬性使元素內聯展示，內聯元素設定寬度無效，相鄰的inline元素會在一行顯示不換行，直到本行排滿為止。block的元素始終會獨佔一行，呈塊狀顯示，可設定寬高。所以inline-block的元素就是寬高可設定，相鄰的元素會在一行顯示，直到本行排滿，也就是讓元素的容器屬性為block，內容為inline。
②float： 設定元素的浮動為左或者右浮動，當設定元素浮動時，相鄰元素會根據自身大小，排滿一行，如果父容器寬度不夠則會換行。當我們設定了元素的浮動時，這個元素就脫離了文件流，相鄰元素會呈環繞裝排列。
兩者共同點是都可以實現元素在一行顯示，並且可以自由設定元素大小。
區別：①inline-block: 水平排列一行，即使元素高度不一，也會以高度最大的元素高度為行高，即使高度小的元素周圍留空，也不回有第二行元素上浮補位。可以設定預設的垂直對齊基線。
②float: 讓元素脫離當前文件流，呈環繞裝排列，如遇上行有空白，而當前元素大小可以擠進去，這個元素會在上行補位排列。預設是頂部對齊。
場景：①inline-block： 當我們要設定某些元素在一行顯示，並且排列方向一致的情況下，我們盡可能去用inline-block。因為inline-block的元素仍然在當前文件流裡面，這樣就減少了程式對dom的更改操作，因為dom的每一次更改，瀏覽器會重繪dom樹。理論上會增加效能消耗。這樣也不用像flaot那樣麻煩，需要清除flaot.
②float： 即使inline-block為布局首選，但是也有inline-block所不能涉及的一些業務需求，比如：有兩個元素，我們需要乙個向左，乙個向右排列，這時候我們就只能用float來實現，對於新手來說，會糾結float不好調，比較麻煩，想到達到預期效果，需要多次調整，有時候我們給元素設定了浮動，元素顯示的順序卻變了，一時搞不清楚就改變html中元素的前後順序等等。因為瀏覽器的解析順序是逐行解析，當設定兩個元素的右浮動時，順序在前面的元素會先被解析，他是右浮動，那麼在前邊的元素就先往右浮動佔位置，後邊的元素依次被解析到以後，才往右排列，這樣我們看到的順序就是反的，當弄明白原因之後，除錯就方便多了。
絕對定位absolute和浮動定位float的異同
absolute 生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。fixed 老ie不支援 生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。static 預設值。沒有定位，元素出...
最短路徑 大話Dijkstra演算法和Floyd演算法
dijkstra演算法 演算法描述 1 演算法思想 設g v,e 是乙個帶權有向圖，把圖中頂點集合v分成兩組，第一組為已求出最短路徑的頂點集合 用s表示，初始時s中只有乙個源點，以後每求得一條最短路徑 就將加入到集合s中，直到全部頂點都加入到s中，演算法就結束了 第二組為其餘未確定最短路徑的頂點集合...
inline block和float應區別對待
參考資料 inline block和float大戰已經持續了一段時間，有的人鍾愛float，整個頁面都用的是float布局，而有些人因為float之後的元素會脫離文件流，而鍾情於inline block。今天因為在做任務，使用inline block出現了一點小問題，為加深記憶，特寫此博文。floa...