html中的定位position以及浮動(dòng)float如何使用？

position：static （靜態(tài)定位） absolute （絕對定位） fixed （固定定位） relative （相對定位）

屬性參數(shù)：

static：靜態(tài)定位，無特殊定位，對象遵循HTML定位規(guī)則（html的默認(rèn)狀態(tài)）

absolute：絕對定位，對象脫離文檔流，需要使用 left、top、right、bottom等屬性進(jìn)行精確地定位�？梢赃\(yùn)用z-index屬性進(jìn)行層疊。（使用絕對定位時(shí)如果出現(xiàn)元素飄動(dòng)，沒有在你指定的位置上，可以在元素的父級元素上使用相對定位�！皞�(gè)人建議”）

relative：相對定位，對象不脫離文檔流，無法像absolute一樣進(jìn)行層疊，但依然要使用 left、top、right、bottom等屬性進(jìn)行正常文檔流中相對原來的對象位置進(jìn)行移動(dòng)，原位會被其他元素占據(jù)。

fixed：固定定位，脫離文檔流，可以使元素在屏幕上保持固定位置，即使?jié)L動(dòng)條下拉元素位置也不會改變。

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p111111會向下移動(dòng)150px、向右移動(dòng)200px處

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

　　p222222會向移動(dòng)到距離底部150px、距離右邊框100px處

當(dāng)你要做一個(gè)始終在頁面右下角顯示的模塊時(shí)使用 position：fixed；bottom：50px；right：50px；可以使p在距離底部50px和右邊框50px處顯示且不管你的頁面怎么改變，p一直會顯示在你可視范圍內(nèi)的相同位置

z-index：100px；后面跟的像素越大p所在的層級越高

語法：

float：left left none；向右、向左或者 不使用（默認(rèn)）

float：脫離文檔流，浮動(dòng)是相對于父級元素進(jìn)行的浮動(dòng)

<p  id="p1">
　　<p  id="p2"></p>
</p>

如上：p1為p2的父級元素p2只能在p1里面進(jìn)行浮動(dòng)

浮動(dòng)的一個(gè)經(jīng)常使用的情形，就是水平導(dǎo)航條的運(yùn)用。水平導(dǎo)航條有兩種方式可以實(shí)現(xiàn)，只要將 li 標(biāo)簽的display屬性改為行內(nèi)樣式，就可以讓列表平鋪，這是核心部分，但是在了解盒子模型我們可以知道，行內(nèi)標(biāo)簽的 margin、padding對上下方向是無效的，這里只能讓列表選項(xiàng)的左右拉長，上下是不會被控制的，塊級標(biāo)簽上下才會被控制。

float也是簡單的一些文字環(huán)繞圖片效果的運(yùn)用將圖片和文字放入同一個(gè)p內(nèi)然后給圖片和p一個(gè)float：left right；

<p   style="width:220px;height:300px;float:left;">
　　<img  src=".."   style=" float:left;"/>這里是文字654651進(jìn)行圖文混排以及文字環(huán)繞kj dsh gkjh kjh jb kjf bg kjs dh fkj gh kj sd hjf hk jk jsh kjg hk
</p>

以上就是html中的定位position以及浮動(dòng)float如何使用？的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！