其實(shí)浮動(dòng)的本意是用來(lái)解決圖片和文字的排版問(wèn)題,但是由于它十分好用,所以被大部分開發(fā)者應(yīng)用到了網(wǎng)頁(yè)布局中,并成為了公認(rèn)布局的一種方式。
接下來(lái),我們通過(guò)一個(gè)demo演示一下浮動(dòng)和定位在網(wǎng)頁(yè)布局中的使用,如demo1所示。
?浮動(dòng)和定位 ???header ??????section ??????floatdiv
用瀏監(jiān)器打開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行。
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號(hào) ISP經(jīng)營(yíng)許可證:豫B-20160281