碼上歡樂
相關內容    簡體    繁體

子div用了float浮動之后,如何撐開父元素,讓父元素div自動適應高度

本文轉載自   查看原文   2020-01-15 14:28   2351    CSS

當在對象內的盒子使用了float后，導致對象本身不能被撐開自適應高度，這個是由於浮動產生原因。

如何解決父div對象自適應高度，方法有三種，接下來DIVCSS5逐一介紹。

1、首先我們先看HTML源代碼：

 
        
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta charset="utf-8" /> 
    5.  
         
  5. <title>父div不自適應高度實例</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .divcss5{ width:500px; border:1px solid #000; padding:10px} 
    8.  
         
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    9.  
         
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    10.  
         
  10. </style> 
    11.  
         
  11. </head> 
    12.  
         
  12. <body> 
    13.  
         
  13. <div class="divcss5"> 
    14.  
         
  14. <div class="divcss5-lf"></div> 
    15.  
         
  15. <div class="divcss5-rt"></div> 
    16.  
         
  16. </div> 
    17.  
         
  17. </body> 
    18.  
         
  18. </html> 
    19.  
        
 
        
2、問題效果截圖：
 
        
外層父級不能css自適應高度撐開截圖
子對象使用float后，父div不能自適應高度實例截圖
 
        
方法一：對父級設置固定高度   -   TOP
 
         
         
        
此方法可用於能確定父級div內子級對象高度。
 
        
假如以上案例，我們知道內部div高度100px,那對父級設置css height為100px看看效果。
 
        
1、完整div+css實例html代碼（對父div加高度）：
 
        
 
        
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta charset="utf-8" /> 
    5.  
         
  5. <title>父div不自適應高度實例</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .divcss5{width:500px;border:1px solid #000;padding:10px; height:100px} 
    8.  
         
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    9.  
         
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    10.  
         
  10. </style> 
    11.  
         
  11. </head> 
    12.  
         
  12. <body> 
    13.  
         
  13. <div class="divcss5"> 
    14.  
         
  14. <div class="divcss5-lf"></div> 
    15.  
         
  15. <div class="divcss5-rt"></div> 
    16.  
         
  16. </div> 
    17.  
         
  17. </body> 
    18.  
         
  18. </html> 
    19.  
        
 
        
2、加高度解決不能撐開子對象使用float效果截圖
 
        
對父加高度100px解決不能撐開
對父加高度100px 解決外層父div自適應高度截圖
 
        
此方法缺點，父級是固定高度，而不隨內容高度自適應高度，沒高度。此方法針對能確定父div內的內容高度情況下使用。
 
         
         
        
方法二：使用css clear清除浮動   -   TOP
 
        
對父級div標簽閉合</div>前加一個clear清除浮動對象。
 
        
1、加clear效果完整div css代碼
 
        
 
        
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta charset="utf-8" /> 
    5.  
         
  5. <title>父div不自適應高度實例</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .divcss5{width:500px;border:1px solid #000;padding:10px} 
    8.  
         
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    9.  
         
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    10.  
         
  10. .clear{ clear:both} 
    11.  
         
  11. </style> 
    12.  
         
  12. </head> 
    13.  
         
  13. <body> 
    14.  
         
  14. <div class="divcss5"> 
    15.  
         
  15. <div class="divcss5-lf"></div> 
    16.  
         
  16. <div class="divcss5-rt"></div> 
    17.  
         
  17. <div class="clear"></div> 
    18.  
         
  18. </div> 
    19.  
         
  19. </body> 
    20.  
         
  20. </html> 
    21.  
        
 
        
2、加css clear解決父div不能自適應高度
 
        
使用clear:both清除父級內子對象產生浮動
使用clear:both清除父級內子對象產生浮動
 
        
此方法需要注意是clear:both加的位置，不是對父級直接加clear樣式，而是在父級</div>前加帶clear對象盒子。
 
         
         
        
方法三：對父級樣式加overflow樣式   -   TOP
 
        
此方法非常簡單，也可以作為推薦解決父級不能被撐開自適應高度的方法，可以不增加div盒子對象，只需要對父級加一個overflow:hidden樣式即可。
 
        
備注：有overflow:hidden
對於overflow:hidden的功能就是說超出部分不顯示，達到一個效果“讓子元素只在父元素內顯示”
 
        
1、完整css div代碼
 
        
 
        
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta charset="utf-8" /> 
    5.  
         
  5. <title>父div不自適應高度實例</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden } 
    8.  
         
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    9.  
         
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    10.  
         
  10. </style> 
    11.  
         
  11. </head> 
    12.  
         
  12. <body> 
    13.  
         
  13. <div class="divcss5"> 
    14.  
         
  14. <div class="divcss5-lf"></div> 
    15.  
         
  15. <div class="divcss5-rt"></div> 
    16.  
         
  16. </div> 
    17.  
         
  17. </body> 
    18.  
         
  18. </html> 
    19.  
        
 
         
         
        
2、加css overflow方法截圖
 
        
父div加overflow樣式解決父自適應高度
父div加overflow樣式解決父自適應高度
 
        
推薦。此方法為非常簡單解決子用float，父div不能自適應高度，能隨父內容多少而自適應高度沒有高度。
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        子div用了float浮動之后，如何撐開父元素，讓父元素div自動適應高度的問題  
        div根據父元素根據子元素高度自適應高度  
        如何讓DIV的高度隨子元素自動撐開？  
        父級div沒高度不能自適應高度的原因——子級使用css float浮動  
        html中子div用了浮動怎樣讓父div的大小自動撐開（清除浮動）  
        div高度自適應(父元素未知，所有高度跟隨子元素最大的高度)  
        子元素浮動后、父元素的高度自適應  
        div隨內容調整高度(父元素高度隨子元素變化)  
        CSS浮動float父div沒有高度的問題  
        CSS浮動float父div沒有高度的問題  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM