关于父元素高度塌陷问题的解决方案--前端面试

关于父元素高度塌陷问题的解决方案

1、什么是高度塌陷

当父元素不给高度时，其高度由子元素撑开，如果子元素添加了浮动，也就是float属性，此时子元素已经脱离了文档流，那么父元素的高度就不会被撑开，高度便为0，这就是高度塌陷

2、解决方法

（1）父元素使用overflow:hidden

在父元素中添加：overflow:hidden，这可以清除子元素的浮动

（2）使用clearfix

给父元素添加一个类，取名clearfix

clearfic样式如下：

`.clearfix::after{

content: ‘’;

display: table;

clear: both;

}`

注意：display只能是块级，例如block,table