高度塌陷问题及其解决方案（常见的几种清除浮动的方法及其优缺点）

父元素没有设置高度，子元素浮动后导致父元素高度为0，就叫做高度塌陷问题
1、给父元素设置overflow:hidden;（实际应用较多）

原理：给父元素设置overflow:hidden;触发了BFC(块级格式化上下文)的状态，闭合了子元素的浮动，子元素重新参与父元素的高度计算，父元素高度不再为0
缺点：显示在父元素框之外的部分会被隐藏

2、在浮动的子元素的末尾添加一个空div，并进行设置

.box{
		clear: both;
		height: 0;         //为了兼容IE6
		overflow: hidden;  //为了兼容IE6
}

缺点：在页面中多次出现这样的空div，容易造成代码的冗余

3、万能清除法

父元素{
		content: "";          //必不可少
		display: block;       //将内联元素转为块元素
		clear: both;          //清除浮动
		height: 0;            //为了兼容IE6
		overflow: hidden;     //为了兼容IE6
		visibility: hidden;   //进一步确保隐藏
}

优点：官方推荐

扩展：元素隐藏不可见的两种方式：
1、display: none; （元素隐藏，位置不保留）
2、visibility: hidden; （元素隐藏，位置保留）

标签：浮动,清除,元素,高度,IE6,塌陷,hidden,overflow
来源： https://blog.csdn.net/qq_55663273/article/details/119617069