学习分享（9）

    /* 一般情况下，我们不会给父元素设置指定的高度

    都是让他被内容撑开的

    如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了

    子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致

    我页面布局混乱，这就叫高度塌陷

    如何解决：

        1、给父元素设置固定高度,但这种方式不推荐使用

    <!-- 解决高度塌陷方法二：

    给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后

    元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷

    1、开启BFC后，元素具有哪些特点？

      （1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）

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

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

     

    2、如何开启BFC属性

      （1）、设置overflow样式，样式值只要是非visible

        也就是说可以设置hideen，auto，scroll等

        其中hideen是副作用最小（推荐使用）

      （2）、设置元素浮动(不推荐)

      确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

      页面布局依然会混乱，而且父元素的宽度也会丢失

      （3）、将元素转成行内块元素(不推荐)

      可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，

      而且三像素也出现

      （4）、将元素设置绝对定位 position: absolute;(不推荐)

      确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

      页面布局依然会混乱，而且父元素的宽度也会丢失

    -->

         通过clear样式，消除浮动元素对下面元素的影响

            可选值

               left  消除左侧浮动对元素的影响

               right 消除右侧浮动对元素的影响

               both  消除两侧侧浮动对元素的影响，

                        其中哪一侧浮动带来的影响大，就清除谁

    <!-- 解决高度塌陷问题方法三：

    在浮动子元素的下方设置一个空的块元素，

        然后借助clear属性来消除浮动元素对空的块元素的浮动影响

     缺点：在结构里面多了一个空的块元素

   

<!--

        解决高度塌陷方案三：

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

          由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

          然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

          基本没有副作用

       

          使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

-->

        */