HTML关于高度坍塌和BFC以及高度坍塌的最佳方案

小萌新刚刚入坑博客园，笔记可能并不是很完美，如有不足之处，还望各位指出，小弟必定铭记

下面是因为浮动而造成的高度坍塌

1.高度坍塌

       高度坍塌的问题：

                     在浮动布局中，父元素的高度默认是被子元素撑开的，

                            当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离

                            将会无法撑起父元素的高度，导致父元素的高度丢失

                      父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

                      所以高度坍塌是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

2.BFC(Block Formatting Context) 块级格式化环境

                -BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

                    开启BFC该元素会变成一个独立的布局区域

                -元素开启BFC的元素后的特点：

                      1.开启BFC后的元素不会被浮动元素所覆盖

                      2.开启BFC后的元素子元素和父元素外边距不会重叠

                      3.开启BFC后的元素可以包含浮动的元素

                

                - 可以通过一些特殊方式来开启元素的BFC：

                      1.设置元素的浮动（不推荐）（副作用比较大）

                      2.将元素设置为行内块元素（不推荐）（副作用比较大）

                      3.将元素的overflow设置为一个非visible的值（副作用最小）

                          -常用的方式为元素设置 overflow：hidden 开启其BFC 以使其可以包含浮动元素

                 -下面相对应的方法

                         1. /* float:left;*/

                          2./*display:inline-block; */

                          3.overflow: hidden;

                但这些或多或少有些不足，BFC也只是让其副作用比较小，并不能完美的解决高度坍塌

3.高度坍塌的最佳方案

                使用after伪类解决高度坍塌

              .box1::after{

                          content: '';

                         display: block;

                          clear:both;

                     }

     用过元素的最后添加元素来撑起高度，用clear清除浮动影响，但clear不能单独使用，尾元素是行内元素，行内元素不独占一行，即使清除了浮动影响也不能撑起高度。所以需要将其转化成一个块元素，这样才能撑起高度坍塌

（图片未截取全，不要误会）