CSS中由于子元素浮动导致父元素高度坍塌问题的解决方法

1.代码如下所示：

<div class="con">
    <div class="son1"></div>
    <div class="son2"></div>
</div>
 <style>
    .con{ 
        border: 1px green solid;
        background-color: #ccc;
    }
    .son1{
        width: 60px;
        height: 60px;
        background-color: orange;
        float: left;
    }
    
    .son2{
        width: 160px;
        height: 60px;
        background-color: pink;
        float: left;
    }
</style>

运行结果

**2.原因分析：**元素设置float属性后，它就不占文档流了而且原来所具有的display：block,和clear：both也没有了，所以自然就无法按照子元素对应的大小去撑开父元素，最后使得父元素就没有高度了，所以最后显示出来的效果就是父元素高度出现了坍塌
3.解决方法：
方法1
给父元素增加以下的类，这我们所说的清除浮动所用的方法
.clearFix::before,
.clearFix::after{
content: “”;
clear: both;
height: 0;
line-height: 0;
display: block;
visibility: hidden;
}

方法2为父元素设置一个BFC，(Block formatting context) 也就是“块级格式化上下文”，其中设置BFC常见的方法如下:
float的值不为none
　　 overflow的值不为visible
　　 position的值为absolute或fixed
　这种方式的设置代码如下：
　 .con{
border: 1px green solid;
background-color: #ccc;
overflow: hidden;
}　
运行结果：