如何使父div的范围包含浮动的子div

最新推荐文章于 2021-09-10 09:30:45 发布

iteye_11002

最新推荐文章于 2021-09-10 09:30:45 发布

阅读量217

点赞数

本文介绍了一种通过添加特殊非浮动div来解决父级元素高度塌陷的问题，即清除浮动的方法。这种方法通过在设置了浮动属性的子元素之后添加一个特殊的div，并设置clear:both样式来实现。文章还提供了具体的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法就是在子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同上