Div 没有其浮动子项的总高度那么高答案

【问题标题】：Div is not as tall as the total height of its floated childrenDiv 没有其浮动子项的总高度那么高
【发布时间】：2013-04-03 11:16:52
【问题描述】：

好的，我真的很难理解 float 属性的行为。

页面宽度为 750 像素。为了保持它位于屏幕的中心，我使用了以下代码：

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

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

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;，但这会将容器定位在窗口的左侧，我不能这样做。

我遗漏了一些东西，我不知道它是什么。

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

【问题讨论】：

我看到你漂浮在左边，但没有清理容器。
看看这篇关于浮动元素和清除它们的文章：quirksmode.org/css/clearing.html
明确：两者；将其添加到 css
附带说明，clear: right; 没有任何用处，因为没有任何东西浮动到右侧。

标签： html css css-float containers

【解决方案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.清除修复

向 CSS 样式表添加 clearfix 规则，并将类 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>

【讨论】：