CSS高度塌陷问题-六种解决方案

问题背景

子元素浮动后，无法撑起父元素高度，导致父元素高度丢失，其下元素会自动上移，导致页面布局混乱

解决方案

一、BFC 块级格式化环境（Block Formatting Context）

BFC是页面元素的一个隐藏属性，默认是关闭的，开启BFC该元素会变成一个独立的布局区域。区域内的元素不会影响区域外的元素.

开启BFC后的特点：

1、开启BFC的元素不会被浮动元素覆盖

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

3、开启BFC的元素可以包含浮动的子元素

开启BFC方式：

1、设置元素的浮动

2、将元素设置为行内块元素：display:inline-block

3、设置overflow为非visible的值：overflow:hidden

二、clear：

清除浮动元素对当前元素所产生的影响

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

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

both：清除两侧中最大影响的那侧

1、在结尾处添加空div标签clear:both。

        结尾处的空div会撑起父元素的高度，使其不会塌陷，但会改变页面结构

2、给父元素设置伪元素选择器，并设置清除浮动的样式。

        box::after{display:block;clear:both;content:"";}

三、父级div定义height

直接给父元素一个高度，使其不会因子元素的浮动塌陷
不推荐，因为设置固定高度，父元素的高度不会适应子元素的高度而变化

四、总结

总的来说，解决高度塌陷问题，有以下几种方法：

1、设置元素的浮动

2、将元素设置为行内块元素：display:inline-block

3、设置overflow为非visible的值：overflow:hidden

4、在结尾处添加空div标签clear:both。

5、给父元素设置伪元素选择器，并设置清除浮动的样式：box::after{display:block;clear:both;content:"";}

6、父级div定义height