问题:
高度塌陷:当所有的子元素浮动的时候,且父元素没有设置高度,这时候父元素就会产生高度塌陷。
解决方案:
1:给父元素单独定义高度
缺点:子元素高超过父级时,会出现溢出
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
height: 200px; /* 固定高度 */
border: 1px solid #ccc;
}
.child {
float: left;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2:父级定义 overflow: hidden;
(兼容 IE 的 zoom: 1;
)
缺点:超出部分被隐藏,布局时要注意
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
overflow: hidden;
zoom: 1; /* 兼容 IE */
border: 1px solid #ccc;
}
.child {
float: left;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3:在浮动元素后面加一个空标签
缺点:增加空标签,不利于页面优化
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1px solid #ccc;
}
.child {
float: left;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="clearfix"></div>
</div>
</body>
</html>
4:父级定义 overflow: auto;
缺点:内部宽高超过父级div时,会出现滚动条
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
overflow: auto;
border: 1px solid #ccc;
}
.child {
float: left;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
5:万能清除法(给塌陷的元素添加伪对象)
缺点:有兼容性问题
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1px solid #ccc;
}
.child {
float: left;
width: 100px;
height: 150px;
background-color: lightblue;
margin: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
//如果需要兼容IE/7/6需要把以下这句加上
.clearfix {*zoom: 1;}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="clearfix"></div>
</div>
</body>
</html>
通常来说,使用伪元素清除浮动(方式3和方式5)是较为常见和推荐的做法。