html中的定位

html中的定位體系

一、 分類

1、常規流static

2、浮動float

3、相對定位relative

4、絕對定位absolute

5、固定定位fixed

二、使用時的區分

在網頁佈局中，常常都會使用到這5中定位方式 ，總體分為三大類：靜態static、浮動float、絕對定位（relative、absolute、fixed）。

1、預設值為static靜態

2、float浮動

使用浮動佈局時，需要註意2個問題

1. float會導致父元素高度塌陷

2. BFC 塊格式化上下文

* BFC能解決高度塌陷問題，用clear或overflow 屬性 來解決  overflow不等於hidden  那麼就會創建一個BFC

clear：both 和overflow 的區別

clear 判斷外部元素影響到自身佈局

overflow 判斷自身元素是否影響到網頁佈局

3、絕對定位

1.相對定位

相對定位會在常規流中保留位置，併在原本位置的相對定位實際的坐標，使用相對定位時，會對其他元素進行覆蓋。

2.絕對定位

絕對定位不會在常規流中保留位置，使用時註意原點的位置（祖先元素position不等於static），若沒有這樣的元素，那麼原點為html包含塊的原點

3.固定位置

固定定位不會在常規流中保留位置，坐標為當前視口的起點為起點

三、在正常網站佈局中，各種佈局都會有使用，根據自己的實際情況具體使用不同的佈局。