问题背景
子元素浮动后，无法撑起父元素高度，导致父元素高度丢失，其下元素会自动上移，导致页面布局混乱
解决方案
一、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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
