Web前端——浮动-解决高度塌陷和清除浮动

1.解决高度塌陷

    <!--

        浮动会导致父元素高度塌陷

        原因：1.子元素浮动，脱离标准文档流，2.父元素没有高度，默认由子元素给它撑开

        解决方法：

          1.父元素设置固定的高度，不推荐使用

          2.BFC：块级格式化上下文

            父元素开启BFC方法：

            a. 设置overflow的值非默认visible

            b. 父元素设置浮动:影响父元素的兄弟元素布局，不推荐

            c. 设置父元素为行内块元素

            e. 设置绝对定位  

          3.通过html在父元素中添加一个在标准文档流的块元素，清除浮动  

     -->

2.清除浮动

    <!-- 清除浮动 clear=》清除浮动元素对其的影响

        1.因为前面元素浮动，后面元素就会上移

         取值：

           left：清除左边浮动元素对其的影响

           right：清除右边浮动元素对其的影响

           both：清除二边对他影响更大的一侧浮动=》元素上移的距离

    -->