1. 程式人生 > >子元素float後撐起父元素的方法

子元素float後撐起父元素的方法

1.給父元素也新增float

讓父元素與子元素一起脫離文件流浮動起來可以讓子元素在父元素內,這樣父元素就能自適應子元素的高度,但是會影響父元素之後的元素排列,甚至影響佈局。

2.給父元素一個固定高度

此方法適用於子元素高度已知並且固定的情況。

3.新建一個空的div

為這個div設定clear:both。

4.給父元素新增 overflow:hidden;

overflow:hidden表示隱藏溢位,當內容超過其父元素時,可以使用該屬性和值將溢位的部分裁剪掉,使頁面更加美觀。當子元素浮動時,父元素會增加高度去包裹住子元素,這個高度是跟隨子元素自適應的高度。

5.::after 偽類;

overflow:hidden表示隱藏溢位,當內容超過其父元素時,可以使用該屬性和值將溢位的部分裁剪掉,使頁面更加美觀。當子元素浮動時,父元素會增加高度去包裹住子元素,這個高度是跟隨子元素自適應的高度。
<div class="div">
    <div class="son">子元素</div>
</div>
.div {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮動*/
    display:block;/*確保該元素是一個塊級元素*/
}