前端如何解决高度塌陷问题

高度塌陷

出现原因：

如果父元素不设置高度或者父元素设置最小高度，一旦内容浮动，内容不占位 
父元素识别不了子元素的高度，就会出现高度塌陷

解决方法：

方法1：

给父元素加overflow:hidden

(overflow:hidden可以触发BFC，BFC是一个独立的渲染区域，
布局规则：浮动的元素也参与高度计算)

缺点:超出父元素范围的内容会隐藏

方法2：

给所有浮动元素的最下方写一个空盒子，给空盒子设置clear：both，让盒子在所有浮动元素的下方显示，就可以把父元素的高度撑起来

缺点:无意义的空盒子会造成代码的冗余

方法3：
万能清除法

.clear_fix:after{
   
	content: ".";
	height: 0px;
	visibility: hidden;占位隐藏
	display: block;
	clear: both;
}
.clear_fix{
   
	*