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

最新推荐文章于 2024-10-01 18:55:33 发布

friendan

最新推荐文章于 2024-10-01 18:55:33 发布

阅读量4.5w

点赞数 12

分类专栏： html 文章标签： div浮动父元素子元素高度自动

本文链接：https://blog.csdn.net/friendan/article/details/51043760

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

先看下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>

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

以上代码效果如下：

很明显呀，以上的效果不是我们想要的，我想要的效果是#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>

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

修改后的效果如下：