web前端--解决因为浮动而引发的父元素塌陷问题

父元素因为浮动塌陷问题解决方法：

注：清除浮动为：clear：both/left/right。
不会使得浮动的元素特性消失，
只会作用于受到浮动影响的其他元素。

1、给父元素设置高度（有局限性）

/* 1-给父元素设置高度 */
            height: 200px;

2、外墙法（不能撑开父元素）：

/* 2-让外墙清除父元素的浮动 */
        .outer-wall {
            clear:both;
        }

3、内墙法（要多添加一个显式div）：

/* 3-让内墙清除浮动 */

        #inner-wall{
            width: 100%;
            height: 0px;
            
            clear: both;
            float: none;
        }

4、给父元素设置浮动，后面元素清除浮动（改变了样式）

/* 4、父元素设置浮动 */
        .list1 {
            background: green;
            float: left;
        }
        #box {
        		clear:both;
        }

5、给父元素设置成行内块（改变了样式）

.list1 {
            background: green;
            /* 5-设置父元素为行内块元素 */
            /* 达不到布局效果 如下 */
            display: inline-block;
        }

6、设置overflow：hidden/auto/sroll （详情见下一篇文章）

.list1 {
            background: green;
            width: 800px;
            /* 6-内容溢出 */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 设置了之后，没有设置高度的父元素就会随着 */

            /* 溢出自适应,出现滚动条 */
            /* overflow: auto; */

            /* 溢出必出现滚动条 */
            /* overflow: scroll; */

            /* 溢出显示，不能清除浮动 */
            /* overflow: visible; */
        }

7、用伪元素替代内墙法（抽象clearfix类用来复用）：

/* 伪元素清除浮动 */
        /* 不用主动插入显性元素 */
        .container::after {
            /* 必写，内容为空即空白 */
            content: "";
            /* 清除浮动 */
            clear: both;
            /* 设置为块元素 才能清除浮动*/
            display: block;
        }