高度坍塌：子元素浮动后，脱离文档流，父元素高度为0.
子元素（绿色方块）浮动前：
子元素浮动后，父元素（黄色div）出现高度坍塌。
最好不要给父元素设置固定高度（虽然这种方法能解决高度坍塌，但最好不要采用。因为父元素的高度一般都是由子元素撑开）
解决办法：
1.为父元素设置overflow：hidden属性。
原理：CSS中overflow：hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。
缺点：如果刚好父元素有些超范围的子元素内容需要显示（比如，个别position定位的子菜单项），不想隐藏，就会发生冲突。
2.在父元素类的结尾追加一个空子元素（块级元素），并设置空子元素清楚浮动影响（clear：both）。
clear 属性规定元素的哪一侧不允许其他浮动元素。clear：both即左右侧都不允许有浮动。
原理：利用clear：both属性和父元素必须包含非浮动的元素两个原理。
缺点：无端多出一个无意义的看不见的空元素，影响选择器和查找元素。
3.设置父元素也浮动。并给后续元素添加clear：both属性。
原理：浮动属性也会强制父元素扩大到包含所有浮动的内部元素。 缺点：需要给后续元素添加clear：both属性。比较麻烦。
4.为父元素末尾伪元素设置clear：both。--完美解决。
伪元素：可以理解为用来给特殊元素添加样式。 伪元素和伪类见：CSS 伪元素
优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题。
父元素::after{content:""; display:table; clear: both;}
有些浏览器display:table会加一个默认高度，把这个高度去掉。
父元素::after{content:""; clear: both; display:table; height: 0}
代码：
<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>
.fri{
background-color: hotpink;
width: 100%;
height: 20px;
}
.mom{
background-color: yellow;
/* 第一种方法，给父元素设置overflow：hidden */
/* overflow: hidden; */
/* 第三种方法。设置父元素也浮动。并给后续元素添加clear：both属性。** */
/* float: left; */
}
.dau{
background-color: green;
width: 50px;
height: 50px;
border: 1px solid;
float: left;
}
.foot{
background-color: rgb(32, 56, 107);
width: 100%;
height: 20px;
/* 第三种方法。设置父元素也浮动。并给后续元素添加clear：both属性。** */
/* clear: both; */
}
/* 第二种方法， 在父元素类的结尾追加一个空子元素（块级元素），
并设置空子元素清楚浮动影响（clear：both）。*/
/* .clear{ */
/* clear: both; */
/* } */
/* 第四种方法，为父元素末尾伪元素设置clear：both。 */
/* .mom::after{content:""; display:table; clear: both;} */
.mom::after{content:""; clear: both; display:table; height: 0}
</style>
</head>
<body>
<div class="fri"></div>
<div class="mom">
<div class="dau"></div>
<div class="dau"></div>
<div class="dau"></div>
<div class="dau"></div>
<div class="dau"></div>
<div class="dau"></div>
<!-- 第二种方法， 在父元素类的结尾追加一个空子元素（块级元素）， -->
<!-- 并设置空子元素清楚浮动影响（clear：both）。 -->
<!-- <div class="clear"></div> -->
</div>
<div class="foot"></div>
</body>
</html>
