如何解决高度塌陷

高度塌陷：

            一般情况下 我们的父元素是不设置高度，让其内容是被内容撑开。如果我们的子元素设置浮动 子元素会脱离文档流，就不能在撑开父元素的高度 从而导致我们父元素的丢失 导致页面布局的混乱。这就是高度塌陷的问题，这个问题必须要解决。

            解决方案：

                  1、给父元素设置固定的高度，但不推荐使用。

                  2、给元素开启bfc

                  3、结合clear属性样式来解决高度塌陷问题。

                  4、结合clear和伪类解决

 /* 方案一

            height: 100px; */

/* 方案二 */

        /* 单独面试题：

        1、什么是BFC？

           （Block Formatting Context） 块级格式化上下文 元素的隐含属性 一般情况下是不开启的 开启之后就相当于把元素单独隔离出来成为一个独立区块 不影响页面的其他元素。

        2、开启BFC后元素有什么样的特点？

           （1）父元素的垂直外边距就不会和子元素的垂直外边距重叠了。

           （2）开启BFC的元素不会被浮动元素覆盖

           （3）开启BFC的元素可以包裹住浮动元素（解决高度塌陷）

           

        3、如何开启BFC

           （1）设置元素浮动 ，虽然可以解决高度塌陷 但宽度丢失 而且页面布局混乱的问题 也没有解决

           （2）将元素转成行内块元素

               也可以解决高度塌陷 但是宽度丢失 而且会带来三像素问题 一定程度上也影响页面布局

           （3）用overflow样式 非默认值visible 可以是auto hidden scoll 可以解决高度塌陷问题 最大程度不影响页面布局 副作用相对较少 建议使用

           （4）设置绝对定位

              可以解决高度塌陷，但是宽度丢失，一定程度上也影响页面布局。

/* 方案二（1）设置浮动 */

            /* float: left; */

            /* （2）转成行内块 */

            /* display: inline-block; */

            /* （3）overflow属性 */

            /* overflow: auto; */

            /* overflow: scroll; */

            /* overflow: hidden; */

            /* （4）设置绝对定位 */

            /* position: absolute; */

/*

             方案三：清除浮动 clear属性

             clear：left 清除左侧浮动带来的影响

             clear：right 清除右侧浮动带来的影响

             clear：both  清除浮动影响较大的

             clear：none 默认值 不清除浮动

             怎么清除？

                 可以在高度塌陷的父元素的最后，添加一个空的div

                 由于这个div并没有浮动，所以他是可以撑开其父元素高度的，然后在对其进行清除浮动

             */

/*

             结合clear和伪类解决

              在父元素的后面添加一个空白的块元素 清除浮动影响  几乎没有副作用

         */

        .outer::after {

            /* 添加一个内容 */

            content: 'nihao';

            /* 将内容转成块元素 */

            display: block;

            /* 清除两侧浮动影响 */

            clear: both;

        }

        /* .inner1{

            clear: both;

        } */

        .box2 {

            height: 100px;

            background-color: yellow;

        }

        /* 整合两种写法 解决父子外边距重叠 可以同时解决父子外边距重叠和高度塌陷的问题

         */

        /* .clearfix::before,.

        clearfix::after{

        } */