CSS中的浮動和定位

浮動和定位一直是讓我焦頭爛額，一直搞不懂，今天就來消除下盲點……

在了解css中的浮動和定位之前有必要先了解清楚標準流和脫離標準流的特性

標準流的預設特性

2、塊級元素（block）：預設獨佔一行，不能並列顯示，能夠設定寬、高，寬度為父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）

3、行內元素（inline）：預設併排顯示，不能設定寬、高，寬度為內容的寬度。例如：span、a、b、i

4、margin-bottom 和margin-top 塌陷，以最大值為準。

脫標的元素的特性

2、浮動的元素有貼邊的性質，絕對定位的元素可以自由定位。

float

值：left | right | none | inherit

初始值：none

應用於：所有元素

繼承性：無

計算值：根據指定確定

浮動元素：

2.浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

3.由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

4.浮動元素周圍的外邊距不會合併：如果其他元素與一具有外邊距的浮**像相鄰（這表示水平相鄰和垂直相鄰），而且這些元素也有外邊距，那麼這些外邊距不會與影象的外邊距合併

5.浮動元素會生成乙個塊級框，而無論這個元素是什麼

浮動的詳情內幕

值：left | right | both | none | inherit

初始值：none

應用於：塊級元素

繼承性：無

計算值：根據指定確定

——含義：指定了clear的元素將清除左邊或者右邊或者全部的浮動元素。css2.1中引入了乙個清除區域，指在元素上外邊距之上增加的額外間距，不允許浮動元素進入這個範圍。這意味著元素設定clear屬性時，它的外邊距並不改變。之所以向下移是這個清除區域造成的。

利用定位，可以準確地定義元素框相對於其正常位置應該出現在**，或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。

position

值：static | relative | absolute | fixed | inherit

初始值：static

應用於：所有元素

繼承性：無

計算值：根據指定確定

含義static

元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素會建立乙個或多個行框，置於其父元素中

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留

absolute

元素框從文件流中完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框

fixed

元素框的表現類似於將position設定為absolute，不過其包含塊是視窗本身

包含塊——定位上下文

對於浮動元素，其包含塊為最近的塊級祖先元素

對於定位，規則就複雜多了……

偏移屬性：

top、right、bottom、left

值：長度 | 百分數 | auto | inherit

初始值：auto

應用於：定位元素（也就是position值不是static的元素）

繼承性：無

百分數：對於top和bottom，相對於包含塊的高度；對於right和left，相對於包含塊的寬度

盼著明天匯報結束可以回家看看~

人嘛，還是需要有點理想的~

css中的浮動和定位

浮動和定位是css布局裡面的重要內容。相信很多人和我一樣，在初學的時候對這部分概念感到非常迷惑。我呢，就和大家分享一下經過一段時間學習的我對這部分知識的理解，希望可以對大家的學習起到幫助的作用。先來說浮動。首先，我們要知道，我們的塊級框是根據其在文件 html文件 中的位置來定位的。這被我們稱之為文...

CSS 定位和浮動

css 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也...

CSS 定位和浮動

css 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也...