高度塌陷问题:(父级背景颜色没有被子级内容撑起)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
background-color: blue;
}
.son{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
</div>
</div>
</body>
</html>
1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,对父级设置一定高度即可,一般设置高度需要能确定内容高度才能设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
background-color: blue;
height: 200px;
}
.son{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
</div>
</div>
</body>
</html>
2、clear:both清除浮动
在html文件中在需要清除浮动地方加
<div style="clear:both;"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
background-color: blue;
}
.son{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
但是为了统一样式,样式一般写在.css文件中,所以我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“”结束前加此div引入“class=“clear””样式。这样即可清除浮动。(增加代码)
<!--html中-->
<div class ="clear"></div>
/*css中*/
.clear{
clear:both;/*清除浮动*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
background-color: blue;
}
.son{
float: left;
}
.clear{
clear:both;/*清除浮动*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
</div>
<div class="clear"></div>
</div>
</body>
</html>
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。
/* 隐藏超出盒子大小的值*/
overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
background-color: blue;
overflow: hidden;
}
.son{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的一堆没用的
</div>
</div>
</body>
</html>
运行结果:父级元素被撑起