【CSS】解决高度塌陷问题

概述：父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

1. 解决方法： 给元素添加属性overflow:hidden;

• 原理： 必须定义width或zoom:1; ,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
• 优点： 简单,代码少,浏览器支持好
• 缺点： 不能和position配合使用,因为超出的尺寸会被隐藏
• 建议： 对没有使用position或对overflow:hidden;理解比较深的使用

2. 解决方法： 给父元素添加属性height

• 原理: 父级div手动定义height,就解决了父级div无法自动获取高度的问题
• 优点： 简单,代码少,容易掌握
• 缺点： 只适合高度固定的布局,要给出准确的高度,如果高度和父级div不一样时,会产生问题.
• 建议: 不推荐使用

3. 解决方法： 在浮动元素下方添加空div,并给该元素添加属性:div{clear:both; height:0; overflow:hidden}

• 原理：
• 优点： 所有浏览器都支持，并且容器溢出不会被裁剪；
• 缺点： 在页面中添加无意义的div，容易造成代码冗余。
• 建议：不推荐使用

4. 解决方法: 万能清除浮动法

• 原理：在父元素中内容的最后添加一个伪元素
• 优点： 支持性好,各大网站都在用
• 缺点： 代码多,不易理解,不适合初学者理解原理
• 建议：推荐使用

父元素:after{
	content:"";
	clear:both; 
	display:block;
	height:0; 
	overflow:hidden; 
	visibility:hidden;
	/*隐藏内容保留占位*/
}

扩展： visibility:hidden;和display:none;的区别

• visiblility:hidden; 属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,
• display:none; 属性会使这个对象彻底消失不显示,也不再占用位置