浮動與定位

浮動

浮動元素會以某種方式從文件的正常流中刪除，再按照屬性值移動到制定的位置，浮動元素從某種意義上來說自成一派，但是他仍會對文件布局產生影響。

注意事項

a.如果要對乙個非替換元素進行浮動，那麼必須為該元素宣告乙個寬度，否則，根據css規則，元素寬度近似為0，元素布局將會出現意想不到的結果。

b.元素宣告為浮動屬性之後，將會生成乙個塊級元素框，無論之前是否是塊級元素。

c.浮動元素的左（右）邊界必須是之前浮動元素的右（左）邊界，在垂直方向上要盡可能地高，但是頂端不能比之前所有浮動元素，塊級元素以及父元素的頂端高。從而充分保證了浮動元素不會重疊。

d.行內框與浮動元素重疊時，其邊框、背景和內容都在浮動元素之上顯示（也就是說浮動元素會被覆蓋）；而塊級框與浮動元素重疊時，其邊框和背景在浮動元素之下顯示，內容在浮動元素之上顯示（邊框和背景被覆蓋，內容不會被覆蓋）

小技巧：子元素浮動，父元素高度為auto時，並沒有獲取到值，只需要加上空div，並將其clear設定為both，即

定位 position包括static、relative、absolute、fixed和inherit五個屬性值。

static：元素預設屬性。

relative：元素偏移，但保留其原本所佔的空間。

absolute：元素從文件流中刪除，定位後生成乙個塊級框，無論他原來是什麼型別。

fixed：性質與absolute類似，但他相對於視窗定位，比如開啟網頁時右下角總會固定出現廣告。

元素（非根元素）的position值relative與absolute都是相對於包含塊定位的，下面對包含塊進行介紹。

1.對於relative，包含塊由最近的塊級框、表單元格或者行內塊祖先框的內容邊界構成。

2.對於absolute，包含塊設定為最近的position不是static的祖先元素。如果祖先是塊級元素，包含塊則設定為該元素的內邊距邊界；如果祖先元素是行內元素，包含塊則設定為該祖先元素的內容邊界；如果沒有祖先，則設定為初始包含塊。