【CSS】解决因float而导致的父类塌陷问题
问题描述：
几个图片放在一个边框中，当把图片全部float，这时，边框就会因为里面没有内容，而导致上下边重叠，不会框柱图片
float是什么意思：
可以把整个文字流（整个框架）是水，而各个元素是水下的鱼，当你给元素赋值float，相当于给鱼指令，让鱼儿跳出水面，这就是float，就是脱离整个框架之外，用ps里的来说就是处于另一个图层上
解决办法
- 在浮动元素的后面添加空的div
（简单，但是代码中应该避免空div的使用）
<div id="A1"></div>
#A1{
clear: both;
}
clear: both; 让当前元素换行到浮动元素的下面，不会再与浮动元素同一行，也不会被浮动元素包围，就相当于当前元素的鱼正好在跳出水平面的鱼的下方
2. 直接设置父元素的高度：
（灵活性比较差，不建议使用）
width: 100px;
height: 100px;
3.overflow
.C1{
border: 2px solid black; /* 2px 宽度，实线，黑色 */
padding: 0; /* 内边距，让内容与边框有距离 */
/*溢出后自动调节*/
/*overflow: auto;*/
}
4:父类添加一个伪类：after
（最推荐,是改进版的方法一）
.C1:after{
content: "";/*content: ""; 用于 ::before 和 ::after 伪元素，表示插入一个空内容。*/
display: block;/*让元素变成块级元素，占据整行*/
clear: both;
}