初始代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script> -->
<style>
.box1{
background-color: pink;
width: 300px;
}
.box2{
height: 300px;
width: 300px;
background-color: red;
}
.b1{
background-color: purple;
width: 100px;
height: 100px;
float: left;
}
.b2{
background-color: green;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="clearfix"></div>
</div>
<div class="box2"></div>
</body>
</html>
未浮動
b1與b2浮動之後，父元素高度為0，塌陷了
一、開啟父元素的同方向浮動；那麼父元素和子元素一起脫離了文檔流，
父元素下面的同級元素依舊會上移，但是父元素也算是有了高度！這個高度和子集元素高度一緻！
.box1{
background-color: pink;
width: 300px;
/* 開啟BFC的方法 */
float: left;
}
二、設定父級元素為絕對定位或者固定定位，和設定浮動的效果一樣。
.box1{
background-color: pink;
width: 300px;
/* 開啟BFC的方法 */
position: absolute;
}
三、設定父級元素的display為inline-block，也就是将父級元素變成了行内塊級元素
父元素下面的同級元素會在原本文檔流中的位置下些許下移
父級元素的高度被子級元素撐開了！
.box1{
background-color: pink;
width: 300px;
/* 開啟BFC的方法 */
display: inline-block;
}
四、設定父級元素的overflow非預設屬性：
父級元素會被子元素撐開,高度就是子元素的高度;
父元素下面的同級元素不會上移。
.box1{
background-color: pink;
width: 300px;
/* 開啟BFC的方法 */
overflow: hidden;
}
五（未開啟BFC，但是解決了高度塌陷問題！）、設定父元素的高度，這種方法照成的結果和開啟overflow的結果一緻；但是本質應該是不相同的
.box1{
background-color: pink;
width: 300px;
height: 200px;
}
六、給塌陷的父級元素的最後添加一個元素，使該元素清除浮動，呈現塊級樣式。也可解決高度塌陷問題！
.box1{
background-color: pink;
width: 300px;
}
.box1:after{
content:'';
display: table;
clear: both;
}