1. 概述
使用浮动有利于页面的布局，但是他也有一个问题就是高度塌陷。
- 在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流， 子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失
2. 浮动高度塌陷展示
2.1 设置浮动前父元素高度不会塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动高度塌陷问题</title>
<style>
.outer {
border: 10px red solid;
}
.inner {
width:200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
2.2 子元素浮动父元素高度塌陷
- 子元素开启浮动
- 父元素高度塌陷
3. 浮动塌陷最终解决方案完整代码
3.1 overflow解决高度塌陷预览
- div2设置了浮动，div1使用overflow解决了高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高度塌陷最终解决方案</title>
<style>
.box1 {
border: 10px red solid;
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: #bbbbbb;
float: left;
}
</style>
</head>
<body>
<div class="box1">1
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
- voerflow解决高度塌陷效果
3.2 clear解决高度塌陷
解决方法：
通过设置div3开启clear消除受div2浮动的位置影响，div3在原有的位置保持不变。利用这个特点将div1的高度塌陷撑开，解决div1受div2浮动影响产生高度塌陷。
原理：
div3虽然高度只有一个数字的高度，却能撑开div1的高度。原因是clear的原理，设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
缺点：
需要单独添加一个块元素来解决高度塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高度塌陷最终解决方案</title>
<style>
.box1 {
border: 10px red solid;
/* overflow: hidden; */
}
.box2 {
width: 100px;
height: 100px;
background-color: #bbbbbb;
float: left;
}
.box3 {
clear: both;
}
</style>
</head>
<body>
<div class="box1">1
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
- clear解决高度塌陷效果
3.3 clear解决高度塌陷
通过clear解决高度塌陷收到启发，我们可以思考如何通过clear解决高度塌陷的同时不需要额外添加一个块元素那？
答案就是通过伪元素，::after在元素标签最后添加一个clear撑起div1的高度塌陷。
- ::after在元素解决高度塌陷介绍
- ::after在元素解决高度塌陷效果预览
3.4 浮动塌陷最终解决方案完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高度塌陷最终解决方案</title>
<style>
/* 1.overflow解决高度塌陷 */
.box1 {
border: 10px red solid;
/* overflow: hidden; */
}
.box2 {
width: 100px;
height: 100px;
background-color: #bbbbbb;
float: left;
}
/* 2.clear解决高度塌陷 */
/* .box3 {
clear: both;
} */
/* 3.终极解决高度塌陷 */
.box1::after {
content: '';
clear: both;
/* ::after是一个行内元素，不会独占一行，因此无法撑开高度。需要将他设置为块元素独占一行 */
display: block;
}
</style>
</head>
<body>
<div class="box1">1
<div class="box2">2</div>
<!-- <div class="box3">3</div> -->
</div>
</body>
</html>
