浮动中出现的高度塌陷问题和解决方法

开启的BFC的一般方式：

        1.设置父元素的浮动（不推荐）

        2.把父元素设置为行内块元素（不推荐）

        3.overflow设置为一个非visible的值

                常用的是hidden

clear:  清除浮动元素对当前元素的影响

        clear：left

                -清除左侧浮动元素对当前元素的影响

        clear：right

                -清除右侧浮动元素对当前元素的影响

        clear：both

                -清除两侧中最大影响的那一侧

给box3设置clear以后，box3不会受到box2浮动的影响，所以会撑起父元素box1的高度

能解决高度塌陷，但是给网页添加了多余的结构，所以不推荐使用

（最好的解决高度塌陷的方式）可以使用after来解决高度塌陷问题：

        原理与clear一样，但是不直接添加一个网页结构，而是使用伪元素

                注意：伪元素，默认是行内元素，所以需要display：block;

        

 在实际使用时，可以直接使用clearfix

        clearfix这个样式可以同时解决高度塌陷与外边距重叠的问题，当你遇到这些问题时，直接使用即可，使用时只需要给元素添加一个类名 clearfix