前言
因子元素浮动后不再向父元素汇报高度，导致父元素在没有设置高度的情况下会收缩消失，为了解决这个问题，特地记录一下。
目的
解决父元素高度塌陷问题
思路一
clear属性
这个属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
clear的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
需要结构与样式分离
给父元素添加::after伪元素
思路二
触发BFC
因为在BFC的高度是auto的情况下，是按照以下的方法计算高度的
- 如果只有inline-level，是行高的顶部和底部的距离
- 如果有block-level，是由最底层的块上边缘和最底层
块盒子的下边缘之间的距离
- 如果有绝对定位元素，将被忽略
- 如果有浮动元素，那么会增加高度以包括这些浮动元
素的下边缘
方法一
添加clear-fix类到父元素上
.clear-fix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clear-fix {
*zoom: 1;
}
效果
添加浮动前
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fbox {
background-color: #f00;
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="fbox">
<div class="box">我是box</div>
</div>
</body>
</html>
浏览器效果
添加浮动后
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fbox {
background-color: #f00;
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
</style>
</head>
<body>
<div class="fbox">
<div class="box">我是box</div>
</div>
</body>
</html>
浏览器效果
使用方法后
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fbox {
background-color: #f00;
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.clear-fix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clear-fix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="fbox clear-fix">
<div class="box">我是box</div>
</div>
</body>
</html>
浏览器效果
方法二
添加overflow: auto到父元素
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fbox {
background-color: #f00;
overflow: auto;
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
</style>
</head>
<body>
<div class="fbox clear-fix">
<div class="box">我是box</div>
</div>
</body>
</html>
浏览器效果
总结
两种方法实现了结构与样式分离，推荐使用
参考
coderwhy前端课讲义
提供CDN加速