Div 的高度不及其浮动子元素的总高度

好吧，我在理解 float 属性的行为方面确实遇到了问题。

该页面宽 750 像素。为了将其保持在屏幕中央，我使用了以下代码：

<div align="center">
    <div align="left" style="width:750px; border-style:double;">
        stuff
    </div>
</div>

主 750 px 宽容器内的元素是具有以下样式的其他容器：

div.infoCont //these containers usualy have two more containers within- for an image and text
{
    width: 740px;
    position: relative;
    left: 2px;
    border-style: double; //for debugging
    float: left;
}
div.textContNI //text only
{
    width: 730px;
    float: left;
    clear: right;
    border-style: double; //for debugging
}

小容器表现正常（它们应该如此，因为它们的位置和大小与我想要的一样大）。但主容器的高度比较小容器的总高度小很多...0 px。它忽略了所有较小容器的高度。

这可以通过在主容器的结束标记之前添加文本来“修复”。我还可以操纵高度<br>标签并且没有文本：高度变得与边框的总高度一样大。 “解决”问题的另一种方法是添加float:left;在样式中，但这将容器放置在窗口的左侧，而我不能这样做。

我错过了一些东西，但我不知道它是什么。

为什么主容器忽略其中容器的总高度？我该如何解决这个错误？

包含浮动元素

这是浮动元素的正确行为。这不是一个错误。

默认情况下，浮动元素不占用其父元素内的空间。对于给定绝对位置的元素也会发生同样的情况。父级有两个子级，但它们都是浮动的，因此没有任何内容占用父级中的空间。因此，父级的高度为零，除非它包含一些其他非浮动内容。

有三种常见方法可以使父级包含其浮动的子级，以便其至少与子级一样高。

1.固定高度

为父级提供一个固定高度，该高度至少与浮动子级的高度一样高。从技术上讲，浮动元素仍然不占据父元素内的空间，但父元素足够高，使其看起来好像占据了空间。

.parent { height: 30px; }
.child  { height: 30px; float: left; }

2.清除div

添加尾随 divclear:both在父级内部。这迫使父级包含浮动的子级。父级会根据需要自动增加高度。默认情况下，空 div 在所有浏览器中的高度均为零，因此尾随 div 不需要额外的样式。

.clear { clear: both; }
...
<div class="parent">
    <!-- Floated children go here -->
    ...
    <!-- Trailing clear div goes here -->
    <div class="clear"></div>
</div>

3. 清除修复

将clearfix规则添加到CSS样式表中，并添加类clearfix给家长。最终结果与添加清晰的 div 相同，但不需要添加额外的 HTML 元素。就像添加一个清晰的 div 一样，这会强制父级包含浮动的子级。父级会根据需要自动增加高度。

/* The traditional version of clearfix, a good one to start with. */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
...
<div class="parent clearfix">
    <!-- Floated children go here -->
    ...
</div>