HTML解决高度塌陷问题

高度塌陷问题

一、什么是高度塌陷？
       子元素浮动后不占位，父元素识别不了内容的高度，叫做高度塌陷
       解决办法：
       1、父元素设置 overflow：hidden
       原理：父元素设置overflow会触发BFC（是一个独立的渲染区域，有自己的布局规则），浮动元素也参与高度计算
       注意：除了visible以外的其他值可以触发BFC
       2、在所有浮动元素的最下方设置一个空盒子，给空盒子设置清楚浮动，把父元素撑开

                    .clear {
                        height: 0px;
                        clear: both;
                        /* 清除浮动 */
                    }

       3、万能清除法
        ：：after 和：：before

        伪对象选择器
        ：：after 和：：before可以动态模拟空盒子

        需要配合content属性一起使用,元素类型是行内

        ：：after 盒子内容的后面模拟空盒子
        ：：before 盒子内容的前面模拟空盒子

            .clear-fix::after {
                content: ".";
                display: block;
                clear: both;
                height: 0px;
                overflow: hidden;
                visibility: hidden;
            }