子div有内容，父div高度为什么为0？（含解决方法）
时间：06-15来源：作者：点击数：
我们先看一段测试代码：
<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属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:中秋我用CSS写了个嫦娥奔月
下一篇:overflow:hidden 属性详细解释
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号