8月17日子元素浮动引起父级容器高度塌陷的4种解决方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素浮动引起父级容器高度塌陷的4种解决方案</title>
</head>
<body>
<style>
.box1{
border:5px dashed red;

/*方案1，给父级容器添加高度*/
/*height:200px;*/

/*方案2，给父级容器添加溢出隐藏属性*/
/*overflow:hidden;
z-index: 99; !* 兼容老版本*!*/
/*方案3，，给父级容器添加伪类*/
}
/* .box1:after{
!*方案3，，给父级容器添加伪类，兼容性最好的 ,推荐方案*!
content:'';!* 默认添加的是行内元素*!
display:block; !*要设置成块元素*!
clear:both; !*清除两边的浮动影响*!
} */
.box2{
width:100%;
height:200px;
background-color:lightgreen;
float:left; /*box2的父元素box1折叠起来了，子元素浮动引起父级容器高度塌陷*/
}
</style>
<div class="box1">
<div class="box2"></div>



<div style="clear:both;"></div>
</div>

</body>
</html>

相关文章