Div不像漂浮儿童的总高度那么高

Question

好的，我在理解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;，但是将容器放在窗口的左侧，我不能拥有它。

我错过了什么，我不知道它是什么。

为什么主容器会忽略其中容器的总高度以及如何处理此错误？

Answer 1

包含浮动元素

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

默认情况下，浮动元素不会占用其父元素中的空间。给定绝对位置的元素也是如此。父母有两个孩子，但他们都漂浮了，所以没有任何东西占据父母的空间。因此，父级的高度为零，除非它包含一些其他非浮动内容。

有三种常见的方法可以让父母包含其浮动的孩子，因此它至少与孩子一样高。

<强> 1。固定高度

为父母提供一个固定的高度，该高度至少与浮动儿童的身高一样高。从技术上讲，浮动元素仍然不占用父元素内的空间，但父元素的高度足以使它看起来像它一样。

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

<强> 2。清除div

在父级内添加一个clear:both的尾随div。这会强制父级包含浮动的子级。父母根据需要自动增加身高。默认情况下，在所有浏览器中，空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规则，并将类clearfix添加到父样式。最终结果与添加clear 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>