子元素浮動后、父元素的高度自適應

一、普通情況下，即沒有任何浮動樣式等的情況下

設置父元素的高度為aotu 或100% 或者不設置，那么父元素會根據子元素的高度而自動調整自身高度。

栗子

<!--html代碼-->
<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
</div>

CSS樣式

#wrap{
            background: pink;
}
#content{
            width: 150px;
            height: 50px;
            background: greenyellow;
}
img{
            width: 100px;
            height: 100px;
}

顯示如下圖：

二、當子元素設置浮動后，父元素的高度就不會自動適應浮動的子元素了。

比如給上述栗子的img添加一個浮動樣式： float:left，顯示效果如圖：

 

所以，為了讓父元素的高度能自動適應浮動的子元素，方法有很多，我常用以下3種：

1.給父元素設置overflow:hidden，同時height不設置或者100%或者auto;

效果如圖，父元素wrap的高度已經包含了2個子元素：浮動的img和不浮動的綠色div：

代碼：

html代碼：

<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
</div>

CSS樣式代碼：

        #wrap{
            background: pink;           
            overflow: hidden;
        }
        #content{
            width: 150px;
            height: 50px;
            background: greenyellow;           
        }
        img{
            width: 100px;
            height: 100px;
            float: left;
        }

2、父級元素內中的最下面新增一個標簽，設置clear:both；

效果同上，不上圖了

html代碼：

<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
    <div class="clear"></div>
</div>

CSS樣式代碼：

#wrap{
            background: pink;         
   
 }
 #content{
            width: 150px;
            height: 50px;
            background: greenyellow;
}
img{
            width: 100px;
            height: 100px;
            float: left;
}
.clear{
            clear: both;//重點代碼
}

 3：用偽類:after（這和第二條很類似，但是我覺得比第二條好，因為偽類只產生了CSS樣式，並不會影響DOM結構,其實我個人，比較推薦這種寫法）

  ul:after{
    content:"";
    display: block;
    clear:both;
  }
li{
　　float:left;
}

HTML代碼：

           <ul>
                <li class="img-list-li"> </li>
                <li class="img-list-li"> </li>
                <li class="img-list-li"> </li>
         </ul>