-
國(guó)家級(jí)
全民數(shù)字素養(yǎng)與技能培訓(xùn)基地 -
河南省
第一批產(chǎn)教融合型企業(yè)建設(shè)培育單位 -
鄭州市
數(shù)字技能人才（碼農(nóng)）培養(yǎng)評(píng)價(jià)聯(lián)盟
其實(shí)浮動(dòng)的本意是用來(lái)解決圖片和文字的排版問(wèn)題，但是由于它十分好用，所以被大部分開(kāi)發(fā)者應(yīng)用到了網(wǎng)頁(yè)布局中，并成為了公認(rèn)布局的一種方式。
接下來(lái)，我們通過(guò)一個(gè)demo演示一下浮動(dòng)和定位在網(wǎng)頁(yè)布局中的使用，如demo1所示。
<!DOCTYPE html><html lang""en">
<head><meta charset="UTF-8"><title>浮動(dòng)和定位</title></head><style type="text/css">
/*給類名為header、aside、main、footer的元素設(shè)置背景顏色和邊框*/
.header, .aside, .main, .footer {
background-color：pink； /*背景色為粉色*/
border: lpx solid yellow; /·邊框?yàn)?span id="rjxhftn" class="token number">1px 的黃色實(shí)線*/
}
, header {
height: 100px;
}
.aside, .main {
height: 200px;
}
.aside {
width: 200px;
float：left； /*類名為aside的元素左浮動(dòng)*/
}
.main {
margin-left：202px；
/*元素左邊距為202px*/ }
.footer { height: 50px:
}
/*給類名為hpat-div的元素設(shè)置背景顏色、邊框、寬高及絕對(duì)定位*/
.float-div {
background-color: paleturquoise; /*背景色為蒼白的寶石綠*/
border：lpx solid yellow； /·邊糕為lpx的黃色實(shí)線*/
width: 100px;
height: 100px;
position: absolute: /*絕對(duì)定位*/
top：160px; /*距父元素頂部邊線160px*/
left：500px; /*距父元素左邊線500px*/
}
</style>
<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="main">section</section>
<footer class="footer">footer</footer>
<div class="float-div">floatdiv</div>
</body>
</html>用瀏監(jiān)器打開(kāi)demo1.頁(yè)面效果如圖。
在demo1中，使用浮動(dòng)的知識(shí)對(duì)頁(yè)面進(jìn)行了布局，也就是圖1-13中的header、aside、section、footer區(qū)域，然后使用絕對(duì)定位知識(shí)創(chuàng)建了一個(gè)浮動(dòng)的div元素floatdiv。需要注意的是，position:absolute會(huì)導(dǎo)致元素脫離文檔流，被定位的元素等于在文檔中不占據(jù)任何位置，在另一個(gè)層呈現(xiàn)。float也會(huì)導(dǎo)致元素脫離文檔流，但還在文檔或容器中占據(jù)位置，把文檔流和其他float元素向左或向右擠，并可能導(dǎo)致?lián)Q行。
