父亲div的高度随子div高度变化关系

最新推荐文章于 2023-04-17 14:40:08 发布

蜀人ing

最新推荐文章于 2023-04-17 14:40:08 发布

阅读量2.5k

点赞数

分类专栏：网页设计与制作文章标签： css和div父类子类高度变化

本文链接：https://blog.csdn.net/Yiyuan_chen/article/details/60592944

版权

本文探讨了三种不同情况下，父div高度如何随子div高度变化：1) 父div未设置高度，浮动子div设置高度，需通过`overflow: hidden;`使父div高度与子div匹配；2) 父类未设置高度，不浮动子类div设置高度，父类高度自动与子类div高度一致；3) 父类设置固定高度，子类div设置高度，父类高度不再随子类div变化。

摘要由CSDN通过智能技术生成

情况一：父div未设置高度浮动子div设置高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>父亲div的高度随子div高度变化关系</title>
	<style type="text/css">
		#main{width: 300px;background: red; }
		#son1{width:100px; float: left;}
		#son2{width: 200px;  float: left;}
	</style>
</head>
<body>
	<div id="main">
		<div id="son1">块1</div>
		<div id="son2">快2</div>
	</div>
</body>
</html>

说明：其中我在main中没有设置高度，却设置了背景颜色，而子类div均没有，这样有利于观察main也就是父类div 的具体高度情况

如图所示：