Question

我有一个div容器#parent和一个div子#child，他是父div的孩子。

#child div包含文本，他向左浮动，问题是我希望#parent div符合＃child` div的高度，保持浮动的高度财产也。。

＆＃13;

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

＆＃13;

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

＆＃13;

这是Jsfiddle

Answer 1

将overflow:auto添加到父级：

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

<强> jsFiddle example

当您浮动孩子时，父母会崩溃，因为它的行为就好像孩子不占空间一样。添加溢出规则可以恢复您所追求的行为。

Answer 2

查看Demo

一种方法是使用“：after”选择器。

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/

如何使浮动div容器适合div高度？

4 个答案: