css中的容器坍塌问题

最新推荐文章于 2024-08-12 18:14:21 发布

saltlike

最新推荐文章于 2024-08-12 18:14:21 发布

阅读量290

点赞数

分类专栏：问题记录文章标签： css html

本文链接：https://blog.csdn.net/saltlike/article/details/120509760

版权

当CSS中子元素设置了浮动，导致父级元素高度变为0，形成高度坍塌问题。本文分析了这个问题的原因，并提供了四种解决方法：1) 给父级元素设置伪元素样式 `::after`；2) 在子元素后面添加`div`并设置`clear: both`；3) 设置`overflow: hidden`；4) 设置固定高度（不推荐）。

摘要由CSDN通过智能技术生成

问题描述：

在调试代码，修改一个div的样式时，发现其高度为0，但是该div却包括了多个有高度的子元素，仔细想了一下，应该就是遇到了css中所说的高度坍塌问题了；

问题分析：

float: left；元素靠左边浮动

float: right；元素靠右边浮动

float: none；元素不浮动

css中出现高度坍塌的原因：子级元素设置了浮动，脱离了文档流；而父级元素未设置浮动属性、未设置高度、高度设置为自适应；从而导致父级元素高度为0，出现高度坍塌；

<div class="father">
	<div class="child1"></div>
	<div class="child2"></div>
</div>

<style>
	.father {
		background-color: bisque;
	}
	.child1 {
		width: 100px;
		height: 200px;
		background-color: cadetblue;
		float: left; 
	}
	.child2 {
		width: 100px;
		height: 200px;
		background-color: darkgreen;
		float: left;
	}
</style>