当我们设置一个父盒子其中有两个子盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素高度塌陷</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
background-color: red;
}
.left{
width: 200px;
height: 200px;
background-color: yellow;
}
.right{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="big">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
当我们想让他们同一行内显示时会给子元素设置浮动
.left{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
此时我们会发现父盒子不显示了 这就是高度塌陷问题 关于高度塌陷有四个解决方法
1、给父元素设置高度
仿佛在说废话 如果设置了高度也不会有高度塌陷的问题 但是 这也时一种解决方法
.big{
background-color: red;
height: 300px;
}
此时 父盒子就显示出来了
2.给父盒子添加属性 overflow:hidden
.big {
background-color: red;
overflow: hidden;
}
效果效果也是这样 也是显示出了父盒子的背景
3.在父元素内部添加一个空的标签,给他设置clear:both属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素高度塌陷</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
background-color: red;
/* overflow: hidden; */
}
.left {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.right {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
span {
display: block;
height: 0;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="big">
<div class="left"></div>
<div class="right"></div>
<span></span>
</div>
</body>
</html>
也可以达到同样的效果
4.既然span可以 那么 给为元素应该也可以的吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素高度塌陷</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
background-color: red;
/* overflow: hidden; */
}
.left {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.right {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.big:after {
content: '';
display: block;
overflow: hidden;
clear: both;
visibility:hidden;
height: 0;
}
/* span {
display: block;
height: 0;
overflow: hidden;
clear: both;
} */
</style>
</head>
<body>
<div class="big">
<div class="left"></div>
<div class="right"></div>
<!-- <span></span> -->
</div>
</body>
</html>
总的来说
第一种没什么用的
第二种的话如果内容超过的话会被裁切掉可能会影响用户体验
第三种的话有利于记忆 但是不利于seo的优化
第四种有利于seo优化 可以说是万能清楚法