如何使浮動的div容器適合div高度？

Question

我有一個div容器#parent和div div #child誰是子div的父級。

#child div包含文本，他向左漂移，問題是我希望#parent div適合＃child` div的高度，同時保持float屬性的高度。

#parent{ 
 
     background: red; 
 
     height: auto; 
 
    } 
 

 
    #child{ 
 
     float:left; 
 
    }

<div id='parent'> 
 
     <div id='child'> 
 
      <p>Some text Some text Some text</p> 
 
     </div> 
 
    
 
    </div>

這裏是一個Jsfiddle

Answer 1

添加overflow:auto父：

#parent { 
    background: red; 
    height: auto; 
    overflow:auto; 
} 
#child { 
    float:left; 
} 

jsFiddle example

浮動子項時，父項會摺疊，因爲它的行爲就好像子項不佔用空間。添加溢出規則可以恢復您之後的行爲。

Answer 2

退房的Demo

一種方式做到這一點與「：後」選擇。

HTML

<div id='parent'> 

    <div id='child'> 
     <p>Some text Some text Some text</p> 
    </div> 

</div> 

CSS

#parent{ 
    background: red; 
} 
#parent:after { 
    content:''; 
    display:block; 
    clear: both; 
} 
#child{ 
    float:left; 
} 

Answer 3

使用clearfix。

.clearfix:after { 
      visibility: hidden; 
      display: block; 
      font-size: 0; 
      content: " "; 
      clear: both; 
      height: 0; 
    } 
.clearfix { 
    display: inline-block; 
    } 
      /* start commented backslash hack \*/ 
    * html .clearfix { 
    height: 1%; 
    } 
    .clearfix { 
    display: block; 
    } 
     /* close commented backslash hack */ 

http://jsfiddle.net/XgErJ/463/

Answer 4

方法：1

#parent{ 
     background: red; 
     height: auto; 
     overflow:auto 
    } 

    #child{ 
     float:left; 
     } 

http://jsbin.com/yufezamofo/3/

方法：2

#parent{ 
     background: red; 
     height: auto; 
display:table 
    } 

    #child{ 
     float:left; 
     display:table-cell; 
     } 

http://jsbin.com/yufezamofo/2/