在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高.
但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷.由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂.
解決辦法:
1.父元素設置overflow屬性設置為hidden;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.parent {
background-color: #2aabd2;
overflow: hidden;
}
.children {
width: 100px;
height: 100px;
background-color: #8a6d3b;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
2.給父元素設置:after偽類
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.parent {
background-color: #2aabd2;
}
.parent:after {
content: '';
display: block;
clear: both;
}
.children {
width: 100px;
height: 100px;
background-color: #8a6d3b;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>