【CSS】解决因float而导致的父类塌陷问题

问题描述：

几个图片放在一个边框中，当把图片全部float，这时，边框就会因为里面没有内容，而导致上下边重叠，不会框柱图片

float是什么意思：

可以把整个文字流（整个框架）是水，而各个元素是水下的鱼，当你给元素赋值float，相当于给鱼指令，让鱼儿跳出水面，这就是float，就是脱离整个框架之外，用ps里的来说就是处于另一个图层上

解决办法

1. 在浮动元素的后面添加空的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;
}