让div父元素的高度随子元素高度的变化而变化-CFANZ编程社区

让div父元素的高度随子元素高度的变化而变化

先看下html代码：

<html>
  <head>
    <title>test</title>
  </head>
  
  <style type="text/css">
    /* main是父元素没有设置高度，我们想让其随子元素高度的变化而变化*/
    #main{width:800px; border:5px solid red;} 
    
    #left{width:400px; height:200px; background:green; float:left;}
    #right{width:200px; height:100px; background:blue; float:right;}
    
    #footer{width:800px; border:1px solid #ccc;}
    

  </style>
  
  <body>
    
    <div id="main"> <!-- 父元素 -->
      <div id="left">left</div>     <!--子元素1-->
      <div id="right">right</div>   <!--子元素2-->
    </div>
    
    <div id="footer">footer</div>
  </body>
  
  
</html>

-----------------------------------------------------------------------------------------------------------------

以上代码效果如下：

让div父元素的高度随子元素高度的变化而变化_子元素

很明显呀，以上的效果不是我们想要的，我想要的效果是#main的div盒子高度等于其子元素的高度。

解决方法：

1、在父元素(#main)div盒子后面加一个空白的div盒子: <div class="clear"></div>

2、设置空白div(class="clear")盒子的CSS样式，清除所有浮动。

---------------------------------------------------------------------------------------------------------------

修改后的代码如下：

<html>
  <head>
    <title>test</title>
  </head>
  
  <style type="text/css">
    /* main是父元素没有设置高度，我们想让其随子元素高度的变化而变化*/
    #main{width:800px; border:5px solid red;} 
    
    #left{width:400px; height:200px; background:green; float:left;}
    #right{width:200px; height:100px; background:blue; float:right;}
    .clear{clear:both;} /* 清除空白盒子的所有浮动 */
    
    #footer{width:800px; border:1px solid #ccc;}
    

  </style>
  
  <body>
    
    <div id="main"> <!-- 父元素 -->
      <div id="left">left</div>     <!--子元素1-->
      <div id="right">right</div>   <!--子元素2-->
      <div class="clear"></div>     <!-- 空白盒子 -->
    </div>
    
    <div id="footer">footer</div>
  </body>
  
  
</html>