##解决 块级元素设置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的解决方法,无需考虑高度改变带来的影响