浮動與定位

浮動

1.1浮動介紹

• 元素能夠設置向左或者向右浮動(不會跳出父元素的寬)
• 元素浮動後，會脫離文檔流(對後面的元素產生影響)
• 元素一旦浮動，會轉換爲塊狀元素
• 浮動的元素並不獨佔一行(但仍然是塊狀元素)，由於脫離標準文檔流
• 浮動的元素，寬默認會使auto，被內容撐開
• 多個元素浮動，會排成一行，寬度超過父元素寬度，會自動換行

1.2浮動的影響

• 對後面元素的影響，後面元素會總體向前
• 對父元素有影響(父元素的高不能被浮動的元素撐開)

1.3消除浮動影響

• 消除元素對後面元素的影響，在後面的元素設置clear：both/left/right屬性
• 消除子元素浮動對父元素的影響，給元素浮動或者設置overflow

定位佈局

2.1 相對定位

• 經過position:relative設置元素爲相對定位元素
• 元素設置爲相對定位以後，不會脫離文檔流，不影響其餘元素
• 能夠經過top/left/right/bottom給相對定位的元素設置位置
• 定位元素：根據原先默認的位置去定位

2.2 絕對定位

• 經過position:absolute來設置絕對定位
• 元素絕對定位後，脫離文檔流，影響後面的元素，寬度默認會被內容撐開
• 能夠經過left/top/right/bottom給絕對定位的元素設置位置
• 定位規則：根據第一個定位的祖先元素，若是沒有定位的祖先元素，根據html元素，祖先元素能夠是任意類型的定位