前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题
一、问题阐述
问题 1:高度消失
先解释一下什么是高度消失(高度消失也叫高度塌陷)如下图所示:
上图的代码如下:
<style>
.box{
width: 600px; background: pink; margin: 0 auto;
}
.box1{
width: 150px; height: 80px; background: #ccc; margin: 5px;
float: left;
}
</style>
<div class="box">
<div class="box1"></div>
</div>
正常情况下,默认是子元素会把父元素的高度撑开,然而并没有;从图中我们可以看出,父元素相当于是“消失”了。
当我们打开控制台查看时,发现并没有,该元素以及设置的css属性依然在:
这种情况就是高度塌陷,是指在子元素设置了浮动,父元素没有设置高度的情况下,父元素会出现高度塌陷!
问题 2:父元素设置了最小高度但不能实现高度自适应
父元素高度不能自适应问题
最小高度(min-height:当内容增多的时候,内容会把容器撑开;当内容减少的时候,容器会保持最小高度)
如下图所示:
我们的初衷是实现高度自适应(随着子元素的增加,元素的高度随之增加,且不改变原始布局),但是很明显,父元素是设置了最小高度min-height
的,却并没有实现我们的需求。
二、解决方案
其实,我们都已经发现了出现这些问题的根本原因就是浮动:float
,那么我们又要如何解决这些问题呢?下面就让我们一起来看一下解决方案以及各自的优缺点。
第一个方法
给父元素添加溢出属性:overflow: hidden;
代码如下:
<style>
.box{
width: 600px; background: pink; margin: 0 auto;
min-height: 100px;
overflow: hidden;
}
.box1{
width: 150px; height: 80px; background: #ccc; margin: 5px;
float: left;
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
优点:简单;
缺点:由于设置了 overflow: hidden;
(溢出隐藏),那么也会隐藏掉其他的作用在当前元素上的其他元素或内容。
第二个方法
在浮动元素的下面添加一个空的块状元素,并且给空元素设置样式{clear:both;}
(清除浮动!)
注意是 块状元素!块状元素!块状元素!
代码如下:
<style>
.box{
width: 600px; background: pink; margin: 0 auto;
min-height: 100px;
}
.box1{
width: 150px; height: 80px; background: #ccc; margin: 5px;
float: left;
}
.clear_fix{
clear: both;
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="clear_fix"></div>
</div>
优点:简单,并且不会有影响布局。
缺点:当一个项目有很多需要添加浮动的元素时,为了解决以上问题就会出现很多没有意义的空元素,形成代码的冗余,平白消耗性能。
第三个方法
俗称万能清除法,利用伪对象选择器:after
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px; background: pink; margin: 0 auto;
min-height: 100px;
}
.box1{
width: 150px; height: 80px; background: #ccc; margin: 5px;
float: left;
}
.clear_fix::after{
content: ".";
display: block;
clear: both;
height: 0px;
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box clear_fix"> // 添加 万能清除法
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
注意:万能清除法是添加在出现问题的元素上的。
优点:完美解决问题,并且不会有任何弊端。
缺点:缺点我只能说代码量多了些,不够简单。
完美效果如下:
好的,以上就是本人对此的粗浅认识,如有不足之处,望诸位大神们不吝赐教,谢谢!
如果对您有所帮助,不妨 点个赞 谢谢!