在正常文档流中,当父元素没有设置高度时,子元素的高度就能撑起父元素,相当于子元素的高度多高父元素高度就多高,理论是这样,但在实际应用时,子元素的属性经常改变,父元素也会受到影响,例如:高度塌陷。
高度塌陷 的原因:
写页面时经常会遇到当父元素没有设置高度,子元素设置浮动时,下面的其他元素会顶到上边出现这种一下这种状况,就是叫 高度塌陷。
出现 高度塌陷 情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1 {
/* 父元素设置边框 */
border: 2px solid blue;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
float: left;
/*子元素设置浮动*/
}
.box3 {
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
效果:
解决浮动带来的 高度塌陷 问题
-
方法1: 给父元素设置固定高度
这种方法可以简单的解决高度塌陷的问题,但需要知道父元素的高度,不推荐使用。 -
方法2:给父元素设置overflow:hidden
这种方法也代码简单,但会影响到其他需要溢出效果的实现(如下拉菜单),不推荐使用。 -
方法3:设置浮动 ▲
有很多种浮动方法可以解决高度塌陷的问题
这里推荐大家使用没有副作用的一种万能清除浮动法
给父元素设置伪类清除浮动
.box1:after {
content: "";
display: block;
clear: both;
}
:after 伪元素在元素之后添加内容
content:”” 使生成的内容为空
display:block 使生成的内容转换为块级元素(块级元素才能清除浮动)
clear:both 清除掉子元素浮动带来的影响
设置浮动解决高度塌陷情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1 {
/* 父元素设置边框 */
border: 2px solid blue;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
float: left;
/*子元素设置浮动*/
}
.box1:after {
content: "";
display: block;
clear: both;
}
.box3 {
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
效果:
这里推荐把万能清除浮动法写在通用的样式里,因为代码量偏多。
.clear:after {
content: "";
display: block;
clear: both;
}
这样就可以解决高度塌陷问题了。
结语:第一次写技术博客,请多多指教!