HTML 父级div的高度为零，而其具有浮动子元素的原因
在本文中，我们将介绍为什么当父级div包含浮动子元素时，它的高度会变成零，并提供一些示例进行说明。
阅读更多：HTML 教程
浮动元素的概念及其影响
浮动元素是CSS中常用的一种布局技术。通过使用float属性，可以使元素向左或向右浮动，脱离正常的文档流，使其他元素环绕在其周围。然而，浮动元素对其父级元素的高度会产生一定的影响。
当一个父级元素包含浮动子元素时，父级元素的高度会变成零。这是因为父级元素在计算高度时并不会将浮动子元素的高度纳入考虑范围内，导致父级元素高度为零。
示例演示
让我们通过以下示例来说明父级div的高度为零的情况：
在上面的示例中，我们创建了一个父级div，其中包含了两个浮动的子元素。父级div设置了边框样式，并将overflow属性设置为auto，这样可以使其包含浮动子元素的高度。
然而，当我们在浏览器中查看该示例时，会发现父级div的高度变为零。这是因为父级div并没有将浮动子元素的高度考虑在内。
为了解决这个问题，我们可以使用清除浮动的方法。可以通过添加一个空的子元素，并将其设置为clear: both;，这样可以使父级div撑起高度。
下面是修改后的示例代码：
通过添加一个清除浮动的空元素，父级div将正确地撑起高度，不再为零。
解决父级div高度为零的其他方法
除了通过清除浮动来解决父级div高度为零的问题外，还有其他方法可以解决这个问题。
方法一：使用伪元素清除浮动
可以通过在父级div中添加伪元素来清除浮动。在父级div的CSS样式中添加如下代码：
.clearfix::after {
content: "";
clear: both;
display: table;
}
然后，将父级div的class属性设置为.clearfix：
通过添加伪元素，同样可以解决父级div高度为零的问题。
方法二：使用overflow属性
另一种解决父级div高度为零的方法是使用overflow属性。如果将父级div的overflow属性设置为hidden或auto，也可以使其正确地包含浮动子元素的高度。
下面是示例代码：
通过将overflow属性设置为hidden或auto，父级div将正确地包含浮动子元素的高度。
总结
当父级div包含浮动子元素时，父级div的高度会变成零。这是因为浮动元素脱离了正常的文档流，父级div在计算高度时不会将浮动子元素的高度纳入考虑范围内。
为了解决这个问题，我们可以使用清除浮动的方法，例如添加一个清除浮动的空元素、使用伪元素清除浮动，或者使用overflow属性。
通过合适的方法解决父级div高度为零的问题，可以确保网页布局正确并符合设计要求。