本文介绍了一种通过添加特殊非浮动div来解决浮动元素导致父级高度塌陷的问题的方法。通过在子div中加入一个特殊的div并设置其样式为clear:both，可以有效地清除左右浮动元素的影响，确保父级div正确包裹所有子元素。
方法就是在子div中加入一个特殊的div,再设置其样式
<body>
<div class="father">
<div class="son1">Box-1<div> //son div都是设置了float属性的
<div class="son2">Box-2<div>
<div class="son3">Box-3<br/>
Box-3<br/>
Box-3<br/>
Box-3</div>
<div class="clear"></div> //特殊的那个非浮动的div
</div>
</body>
//特殊的那个div的css
.father .clear{
margin:0;
padding;0;
border;0;
clear:both; //左右清除环绕浮动盒子的效果
}
//浮动div的css
.son1{
float:left;
}
son2,son3同上
<body>
<div class="father">
<div class="son1">Box-1<div> //son div都是设置了float属性的
<div class="son2">Box-2<div>
<div class="son3">Box-3<br/>
Box-3<br/>
Box-3<br/>
Box-3</div>
<div class="clear"></div> //特殊的那个非浮动的div
</div>
</body>
//特殊的那个div的css
.father .clear{
margin:0;
padding;0;
border;0;
clear:both; //左右清除环绕浮动盒子的效果
}
//浮动div的css
.son1{
float:left;
}
son2,son3同上
扫一扫
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
