CSS---解决元素浮动导致的父元素高度塌陷的问题
程序员文章站
2022-04-25 15:50:31
...
若父元素没有设置高度,其子元素设置浮动后会,子元素占用空间被释放,导致父元素高度塌陷。
解决方法:
(1)浮动元素后添加<div class="clear"></div>添加清除浮动样式
.clear{
clear:both
}
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
<!--浮动元素后添加<div class=”clear”></div>添加清除浮动样式 -->
</div>
</body>
<style>
#div {
width: 400px;
background: #ccc;
}
#div1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear {
clear: both
}
</style>
(2)为父元素添加样式after,
#div::after {
content: "";
display: block;
clear: both
}
(3)为父元素添加样式
overflow:hidden;
(4)手动为父元素添加高度。
上一篇: 总结浮动元素float知识点。
下一篇: float:left不起作用