首頁(yè)技術(shù)文章正文

CSS中浮動(dòng)和定位有什么區(qū)別？

更新時(shí)間:2023-03-27 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

其實(shí)浮動(dòng)的本意是用來解決圖片和文字的排版問題，但是由于它十分好用，所以被大部分開發(fā)者應(yīng)用到了網(wǎng)頁(yè)布局中，并成為了公認(rèn)布局的一種方式。

接下來，我們通過一個(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)?px 的黃色實(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)器打開demo1.頁(yè)面效果如圖。
1679902617021_浮動(dòng)和定位.png

在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行。




分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！