2021-03-03解决 块级元素设置float导致内容不能撑开，无法显示背景颜色

##解决 块级元素设置float导致内容不能撑开，无法显示背景颜色

解决父级包含的子块级元素在设置了float属性会导致父级元素不能由子元素撑开的几种办法
例如以下代码段：

 <div class="div1">
        <div class="div2"></div>
        <div class="div2"></div>
    </div>

.div1{
        border: 1px solid black;
        width: 400px;
        background-color: yellow;

    }
    .div2{
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid red;
    }

会造成这样的结果

解决办法
1.设置父级的高度
只需要对父级元素css添加一个高度
例如在父级元素添加以下一行代码

height: 120px;

添加后

.div1{
        border: 1px solid black;
        width: 400px;
        background-color: yellow;
		height: 120px;
    }

问题解决

2.利用clear：both清除浮动
css段添加如下代码段：

.div3{
        clear: both;
    }

然后在浮动元素后添加一个带有该属性的div

<div class="div1">
        <div class="div2"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

问题解决，而且这样是自适应高度的，无需考虑高度不够的问题

3.父级元素添加overflow：hidden
只需在父级元素添加

overflow: hidden; 

添加后：

.div1{
        border: 1px solid black;
        width: 400px;
        background-color: yellow; 
        overflow: hidden;       
    }

<div class="div1">
        <div class="div2"></div>
        <div class="div2"></div>       
    </div>

问题解决 高度也是自适应

总结：
1.父级元素设置高度
2.在浮动元素后面添加一个带有clear：both属性的div
3.父级元素添加overflow：hidden
推荐使用2,3的解决方法，无需考虑高度改变带来的影响