亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 13
粉絲 0
評論 0
訪問量 16487
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
浮動元素高度產(chǎn)生塌陷的原因及解決方案+定位元素經(jīng)典3列布局實現(xiàn)
小追
原創(chuàng)
1419人瀏覽過

浮動元素引起的高度坍塌與解決方案

元素浮動后高度塌陷的原因：

元素浮動的3個定義

1.元素浮動后從文檔流中脫離出來（意思是它會釋放出它原來占據(jù)的空間）；

2元素浮動后，它后面元素會自動填充到它原來的位置；

3浮動元素只會影響到它后面的元素布局，對前面沒有影響。

所以當(dāng)子元素浮動后，父級里變空，就會產(chǎn)生高度上的缺失塌陷。

解決方案：

1.給父元素添加高度：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮動元素的高度塌陷與解決辦法</title>
  7.     <style>
  8.         .container{
  9.             border:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 給3個item都浮動會發(fā)現(xiàn)父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解決辦法：
  29.         1給.container一個高度，這是很不好的，不要這么用 
  30.         .container{
  31.              height:150px;
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="item">1</div>
  37.         <div class="item">2</div>
  38.         <div class="item">3</div>
  39.     </div>
  40. </body>
  41. </html>

這樣做其實父元素內(nèi)部是空的，不建議這么做；

2.給父級也添加浮動：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮動元素的高度塌陷與解決辦法</title>
  7.     <style>
  8.         .container{
  9.             border:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 給3個item都浮動會發(fā)現(xiàn)父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 2給父級也進行浮動，如果這個父級還有好多個父級會產(chǎn)生傳導(dǎo)效應(yīng)，就很不好了 */
  29.         .container{
  30.             float:left;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="main">    
  36.         <div class="container">
  37.         <div class="item">1</div>
  38.         <div class="item">2</div>
  39.         <div class="item">3</div>
  40.         </div>
  41.     </div>
  43. </body>
  44. </html>

結(jié)果：

會發(fā)現(xiàn)如果這個父元素還有它的父元素，那么它的父元素高度將會崩塌，如果有很多個父元素就更麻煩了，所以這也是不好的；

3.添加一個專用元素用來清浮動：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮動元素的高度塌陷與解決辦法</title>
  7.     <style>
  8.         .container{
  9.             border:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 給3個item都浮動會發(fā)現(xiàn)父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解決辦法：
  29.         3添加一個專用元素用來清浮動，這樣對后面渲染也不好 */
  30.         .clear{
  31.             clear:both;
  32.         } 
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <div class="item">1</div>
  38.         <div class="item">2</div>
  39.         <div class="item">3</div>
  40.         <div class="clear"></div> 
  42.     </div>
  43. </body>
  44. </html>

結(jié)果：

可以看到代碼亂掉了，要修正需要添加不少代碼，對后期渲染很不友好；

4.添加一個偽元素來解決：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮動元素的高度塌陷與解決辦法</title>
  7.     <style>
  8.         .container{
  9.             border:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 給3個item都浮動會發(fā)現(xiàn)父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解決辦法：
  29.         /* 4添加一個偽元素來解決 */
  30.         .container::after{
  31.             content:"";
  32.             display:block;
  33.             clear:both;
  34.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.     </div>
  44. </body>
  45. </html>

結(jié)果

看著是可行的，但是和方法1是差不多的；

5.使用BFC塊級格式化上下文：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮動元素的高度塌陷與解決辦法</title>
  7.     <style>
  8.         .container{
  9.             border:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 給3個item都浮動會發(fā)現(xiàn)父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解決辦法：
  29.         /* 5最簡單的解決辦法 用到BFC塊級格式化上下文*/
  30.         .container{
  31.             /* 可行1 */
  32.             overflow:auto;
  33.             /* 可行2 */
  34.             overflow:hidden;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.     </div>
  44. </body>
  45. </html>

結(jié)果
可以看到這是最簡單的方法。

絕對定位實現(xiàn)經(jīng)典3列布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>三列布局-絕對定位實現(xiàn)</title>
  7.     <style>
  8.         /* 初始化 */
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.         }
  14.         li{
  15.             list-style:none;
  16.         }
  17.         a{
  18.             text-decoration:none;
  19.             color:#666;
  20.         }
  21.         /* 頁頭頁腳基本樣式 */
  22.         .header, .floot{
  23.             height:40px;
  24.             background-color:lightblue;
  25.         }
  26.         /* 頁頭頁腳內(nèi)容區(qū)基本樣式 */
  27.         .content{
  28.             width:960px;
  29.             margin:auto;
  30.         }
  31.         /* 頁頭里的li的樣式 */
  32.         .content ul li{
  33.             float:left;
  34.             padding:0 15px;
  35.             /* line-height:行間距離，就是行高 */
  36.             line-height:40px;
  37.         }
  38.         .content ul li:hover{
  39.             background-color:coral;
  40.         }
  41.         /* 頁腳 */
  42.         .content p{
  43.             /* text-align水平對齊方式 */
  44.             text-align:center;
  45.             line-height:40px;
  46.         }
  47.         /* 內(nèi)容區(qū)用定位做 */
  48.         .container{
  49.             width:960px;
  50.             margin:10px auto;
  51.             /* 最小高度，以后寫頁面盡量用這樣的方式去寫，這樣頁面能撐開不會顯得丑 */
  52.             min-height:600px;
  53.             /* 轉(zhuǎn)為父級定位 */
  54.             position:relative;
  55.         }
  56.         .container>.left{
  57.             width:200px;
  58.             background-color:wheat;
  59.             min-height:600px;
  60.             position:absolute;
  61.             top:0;
  62.             left:0;
  63.         }   
  64.         .container > .main{
  65.             width:540px;
  66.             background-color:lightgreen;
  67.             min-height:600px;
  68.             position:absolute;
  69.             top:0;
  70.             left:210px;
  71.         }
  72.         .container>.right{
  73.             width:200px;
  74.             background-color:wheat;
  75.             min-height:600px;
  76.             position:absolute;
  77.             top:0;
  78.             right:0;
  79.         }
  81.     </style>
  82. </head>
  83. <body>
  84.     <!-- 頁眉    -->
  85.     <div class="header">
  86.         <div class="content">
  87.             <ul>
  88.                 <li><a href="">首頁</a></li>
  89.                 <li><a href="">618主會場</a></li>
  90.                 <li><a href="">聯(lián)系客服</a></li>
  91.             </ul>
  92.         </div>
  93.     </div>
  94.     <!-- 主體 -->
  95.     <div class="container">
  96.         <div class="left">左側(cè)</div>
  97.         <div class="main">內(nèi)容</div>
  98.         <div class="right">右側(cè)</div>
  99.     </div>
  100.     <!-- 頁腳 -->
  101.     <div class="floot">
  102.         <div class="content">
  103.             <p>php中文網(wǎng)&copy;|備案號：蘇ICP備*******</p> 
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>

效果圖：

批改老師：WJWJ

批改狀態(tài)：合格

老師批語：總體來講寫的很不錯，繼續(xù)加油！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)