本文介绍了在CSS布局中解决父元素高度塌陷问题的三种方法：通过追加div并设置clear属性、让父元素也浮动、使用clearfix技术。这些技巧对于前端开发者来说非常实用。
<style>
.div1{
background-color:yellow;
width:330px;
}
.div2{
background-color:red;
height:300px;
width:300px;
float:left;
}
.div1{
background-color:yellow;
width:330px;
}
.div2{
background-color:red;
height:300px;
width:300px;
float:left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
此时防止父元素高度塌陷的方法：
1，在div2后面追加div3，并设置属性为
.div3{
clear:both;
height:0；
overflow:hidden;
}
clear:both;
height:0；
overflow:hidden;
}
此时父元素宽度为设置的330px，若不设置，则充满整行。测试的不设置height:0;和overflow:hidden;也是可以的。
2，设置父元素也为浮动
3，使用clearfix
.clearfix:after{
content:"";
display:block;
clear:both;
height:0;
}
content:"";
display:block;
clear:both;
height:0;
}
.clearfix{
zoom:1;
width:330px;
}
zoom:1;
width:330px;
}
此时父元素的宽度由。clearfix设置的决定，弱国没有设置，则为.div1下设置的，如果都没有设置则充满整行。
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
