您的位置：首页 > 其它

子元素浮动，父元素撑不开height=0解决方法

2017-08-23 14:22 148 查看
如代码所示，div1，div2，div3都是左浮动的。父元素box撑不开。

<div class="box">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<!--<p style="clear: both"></p>-->
</div>解决方法：

1.直接设置父元素height

.box{
border: 1px solid #00d6b2;
/*height: 102px;*/

}

2.父元素设置overflow：hidden

.box{
border: 1px solid #00d6b2;
/*overflow: hidden;*/
}

3.父元素内末尾添加一个元素

意思就是在父元素内末尾添加一个元素 清楚浮动clear：both；
<div class="box">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<!--<p style="clear: both"></p>-->
</div>

4.伪类方法 父元素：after

意思就是在父元素后面加一个空格，设置这个空格clear：both；display：block；visibility：hidden；height：0；
.box:after{
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
最后，完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title</title>
<script type="text/javascript">

</script>
<style type="text/css">
.box{
border: 1px solid #00d6b2;
/*height: 102px;*/
/*overflow: hidden;*/
}
.box:after{
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
.div{
border: 1px solid black;
float: left;
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: greenyellow;
}
.div3{
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<!--<p style="clear: both"></p>-->
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航