CSS display:inline和float:left兩者的區別

CSS display:inline和float:left兩者的區別CSS display是指顯示狀態，inline表示內聯，特點是緊貼著前一個內嵌元素，通常預設的內嵌元素有span,a,em,strong等。而float表示的是浮動，float:left，是針對區塊層級元素的浮動形式，是不同形式的兩種狀態。首先我們要明確，CSS display:inline;與float:left;正確含義。CSS display:inline;(內聯)《CSS權威指南》中文字顯示：任何不是區塊層級元素的可見元素都是內嵌元素。其表現的特性是“行布局”形式，這裡的“行布局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內嵌元素border-bottom:1pxsolid#000;時其表現是以每行進行重複，每一行下方都會有一條黑色的細線。如果是區塊層級元素那麼所顯示的的黑線只會在塊的下方出現。當然這看起來不像是CSS
display:inline;與float:left;的區別所在，但是當理解了float:left;的特性那麼我們就清楚到底是怎麼回事了。float:left;(左浮動)他使得指定元素脫離普通的文檔流而產生的特別的布局特性。並且FLOAT必需應用在區塊層級元素之上，也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定為區塊層級元素。那麼我們很清楚了，內聯(CSS display:inline;)元素不能設定寬高，因為內聯屬於行布局，其特性是在一行裡進行布局，所以不能被設定寬高。