极客笔记CSS 包裹元素div高度为零，其中包含了浮动元素
在本文中，我们将介绍CSS中当一个包裹元素的高度为0时，其中包含了浮动元素的原因以及解决方法。
阅读更多：CSS 教程
问题描述
当一个div包裹了浮动元素时，我们可能会发现这个div的高度变成了0，即使其中包含了其他内容。这是因为浮动元素会脱离文档的常规流，导致其父元素无法检测到其高度。
例如，考虑以下HTML结构：
<div class="wrapper">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>
</div>
其中，.float-left和.float-right是左浮动和右浮动的元素，.clearfix是用于解决这个问题的清除浮动的元素。
原因分析
要理解为什么父元素的高度会变成0，我们需要知道浮动元素对文档流的影响。当一个元素浮动时，它会从文档流中脱离，并且其父元素无法检测到其高度。因此，包裹这些浮动元素的div的高度会变成0。
解决方案
解决这个问题的常用方法是使用”clearfix”技术。这是一种在包裹元素中清除浮动的方法。这个技术通过给包裹元素添加一个带有clear:both属性的空元素来实现，从而使包裹元素能够检测到其内部浮动元素的高度。
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后，将这个clearfix类应用于包裹元素：
<div class="wrapper clearfix">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>
</div>
现在，包裹元素的高度将正确地根据其内部浮动元素的高度进行计算。
另一种解决该问题的方法是使用overflow属性。通过给包裹元素的CSS添加overflow: hidden;或overflow: auto;属性，可以触发包裹元素的BFC（块级格式化上下文）并使其能够正确包含浮动元素。
.wrapper {
overflow: hidden;
}
这样，包裹元素的高度将根据其内部浮动元素的高度自动调整。
示例
为了更好地理解问题和解决方案，我们来看一个实际示例。
<div class="wrapper clearfix">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>
</div>
.wrapper {
background-color: lightgray;
margin-bottom: 20px;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: red;
}
.float-right {
float: right;
width: 50%;
height: 150px;
background-color: blue;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
在这个示例中，我们有一个包裹元素.wrapper，其中包含了.float-left和.float-right两个浮动元素，以及.clearfix用于清除浮动。
如果我们不使用任何解决方案，.wrapper的高度将为0，无法正确包含浮动的元素。但是，应用了clearfix技术或overflow属性后，.wrapper的高度将根据其内部浮动元素的高度进行自动调整。
总结
通过使用clearfix技术或给包裹元素添加overflow属性，我们可以解决CSS中包裹元素高度为0的问题。这些方法可以使包裹元素能够正确地包含浮动元素，并根据其高度自动调整。对于包含浮动元素的布局，这些解决方案非常有用。记住，在处理包含浮动的元素时，始终考虑其对文档流的影响，以便正确处理包裹元素的高度。