CSS浮动父级塌陷的解决办法

高度塌陷

在文档流中，父元素的高度是被子元素撑开

若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷会影响页面布局，这个必须解决 

解决方案一：

给父元素设置固定高度 但在实际开发过程中，高度都是被内容撑开

解决方案二： 

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

当开启了BFC后，元素会变成一个独立的布局区域，会有以下特点
             1:父元素的垂直外边距不会和子元素重叠
             2:开启BFC的元素不会被浮动元素所覆盖
             3:开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）
如何开启BFC
           1:设置元素浮动
               不推荐，还是会改变页面的布局，而且父元素的宽度会丢失
           2:设置元素为inline-block
              不推荐，会丢失父元素的宽度
           3:将元素的overflow设置为一个非visible的值
              可以使用，也会产生一些小的副作用
           4:设置元素绝对定位

解决方案三：

由于受到浮动的影响，box3上移，希望清除其他元素浮动对当前元素产生的影响，可以用clear属性来完成

可选值：
            none  默认值  不清除浮动
            left  清除左侧浮动元素对当前元素的影响
            right   清除右侧浮动元素对当前元素的影响 
            both  清除两侧浮动元素对当前元素的影响
                   清除对他影响最大的那个元素的浮动

clear原理
       设置浮动后，浏览器会自动为元素添加一个上外边距，以使位置不受其他元素的影响

解决方案四：
添加一个内容 

将内容转成块元素 

display: block；

清除两侧的浮动 

clear: both;