您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

子div有内容，父div高度为什么为0？（含解决方法）

时间：06-15来源：作者：点击数：56

我们先看一段测试代码：

<html>
	<head>
		<title></title>	
		<style>
			.aBox{
				background-color:blue;
				
			}
			.bBox{
				background-color:yellow;
				float:left;
				height:400px;
				width:400px;
			}
		</style>
	</head>
	<body>
		<div class="aBox">
			<div class="bBox"></div>
		</div>	
	</body>
</html>

效果图：

从上面的代码来看，包含一个父div和一个子div。而子div又有高度，但是审查元素时，却发现该父div却没有高度（所以此时父div的背景色蓝色也没有显示出来）。这是为什么呢？

原因：

当一个元素只包含浮动元素的时候，它会出现高度折叠,即元素的上下底边重合，和高度为0效果一样。

aBox的所有div加上了浮动属性。在显示器的侧面，bBox这个div已经脱离了aBox这个div，也就是说，此时的bBox的宽高是多少，对于已经脱离了的aBox来说，都是不起作用的。

解决方法：

给包含元素设置高度

直接给元素设置固定高度。但是这样的高度无法自适应。

利用overflow:hidden属性

在我的一篇关于overflow的属性中有介绍 https://www.cdsy.xyz/computer/programme/html_div_css/230615/cd44240.html

添加一个空div

<div class="aBox">
		<div class="bBox"></div>
		<div></div>
</div>

这种方法是添加一个空的div，这个div和浮动元素同一级别，且位于浮动元素的最后。它在这里并不具有实际意义，它的作用只是撑开div标签而已。

利用伪元素:after

.aBox:after{
		background-color:blue;
		float:left;
		content:"";
		display: block;
		clear: both; 
	}

在:after为元素里面用到了content属性，这样这条样式的意思是在class为aBox的div元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除div的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号