子div設定float後會導致父div無法自動撐開

小賢筆記發表於2018-07-24

本文是從簡書複製的, markdown語法可能有些出入, 想看”正版”和更多內容請關注 簡書: 小賢筆記

注: 文章部分轉載 彩泉 – 部落格園

原因：內部的DIV因為float:left之後，就丟失了clear:both和display:block的樣式，所以外部的DIV不會被撐開。

以下是幾種解決辦法（假設父div的class為“container”）:

  • 方法1、使用偽類
container::after{
    display: block;
    height:0;
    content: ``;
    clear: both;
}
container{
    display: inline-block; /*第一種撐開辦法，底下會有部分被遮到，所以新增這行，就完美了*/
}
  • 方法2、不撐開的原理是overflow不可見，所以給父div新增overflow:auto;就行，IE要用_height:1%;
container{
    overflow: auto;/*讓主要內容區隨內容自動撐開*/
    overflow-y:hidden;/*把出現的滾動條隱藏，但是底下會被遮到一點，不完美*/
     _height:1%;/*對IE的hack*/
}

  • 方法3、可以專門最後新增一個子div用來清除浮動：<div class="clear"></div>
    設定樣式.clear{clear:both; font-size:0; height:1%;}

  • 方法4、可以設定父div的高度（也就是手動撐開，不靈活）；

  • 方法5、直接給父div設定 display: inline-block; 這樣也自動撐開

  • 方法6、直接給子div設定 display: inline-block; 也能自動撐開，但是排版問題有待研究學習

  • 方法7、從網上還發現了一種方法，給父div增加屬性：display:table;

  • 方法8、 子div浮動我就套不住你?OK,我讓父div也浮動: 父div設定 float: left; 也可以

相關文章