CSS清除浮动解决高度坍塌
程序员文章站
2022-03-29 14:46:51
...
css高度坍塌
高度坍塌的表现
- 父元素本身是由子元素内容而撑开的高度，由于浮动和定位导致元素脱离文档流，父元素会丢失高度，出现高度崩塌的现象。
高度坍塌的解决方法
设置前：
设置后：
- 最简单直接的就是自己定义父元素的高度。
<!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>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
/* 设置高度 */
height: 150px;
margin: 0 auto;
background-color: aqua;
}
.small-box{
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</body>
</html>
- （1）给父元素设置类名clear，清除浮动带来的影响。
（2）相同内容的不同写法：
.clearfix:after {
content:"";
display: block;
clear:both;
}
:after 选择器向选定的元素之后插入内容
clearfix是父元素的类名
下面代码演示：
<!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>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
/* 设置高度 */
/* height: 150px; */
margin: 0 auto;
background-color: aqua;
}
.small-box{
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
float: left;
}
/* clear 清除浮动 */
.clear{
/* 生成的内容为空 */
content: '';
/* 生成的元素以块级元素展示 */
display: block;
/*清除前面元素浮动带来的影响*/
clear: both;
}
/* 另外的一种写法可以结合不同的场景使用
.box:after {
content: "";
display: block;
clear: both;
} */
</style>
</head>
<body>
/* 给父元素添加类名 clear */
<div class="box clear">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</body>
</html>
- 给父元素添加overflow：hidden
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
margin: 0 auto;
background-color: aqua;
overflow: hidden;
}
.small-box {
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</body>
</html>