Div不像它浮动的孩子的总高度那么高 [英] Div is not as tall as the total height of its floated children

问题描述

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

OK, I'm really having problems understanding the behavior of the float property.

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

The page is 750 px wide. In order to keep it positioned in the center of the screen, I used this code:

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

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

The elements within the main 750 px wide container are other containers that have the following styles:

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
}

小容器的行为正常定位和像我想要的方式一样大）。但是主容器的高度是A LOT小于较小容器的总高度... 0 px。它忽略所有较小容器的高度。

The small containers behave normally (they should be, because they are positioned and as big as the way I want to). But the height of the main container is A LOT less that the total height of the smaller containers... 0 px. It ignores the height of ALL the smaller containers.

这可以通过在主容器的结束标记之前添加文本来固定。我也可以用< br> 标签处理高度，没有文本：高度变得与边框的总高度一样大。另一种修复问题的方法是在样式中添加 float：left; ，但是将容器放在窗口的左侧，我不能

This can be "fixed" by adding text right before the closing tag of the main container. I can also manipulate the height with <br> tags and no text: the height becomes as big as the total height of the borders. Another way to "fix" the problem is to add float:left; in the style, but that positions the container on the left side of the window and I can't have that.

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

I'm missing something and I don't know what it is.

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

Why does the main container ignore the total height of the containers within it and how can I take care of this bug?

推荐答案

包含浮动元素

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

Containing floated elements

This is the correct behavior of floated elements. It's not a bug.

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

By default, a floated element doesn't occupy space within its parent. The same happens with elements given absolute position. The parent has two children, but they're both floated, so nothing occupies space in the parent. As a result the parent has a height of zero, unless it contains some other non-floated content.

有三种常见的方法使父级包含其浮动的子级，所以它至少要和它的孩子一样高。

There are three common ways to make a parent contain its floated children, so that it's at least as tall as its children.

1。固定高度

给父级一个固定高度，该高度至少与浮动子级的高度一样高。从技术上来说，浮动的元素仍然不占用父级内的空间，但父级足够高，使其看起来好像是这样。

Give the parent a fixed height that's at least as tall as the height of the floated child. Technically, the floated element still does not occupy space within the parent, but the parent is tall enough to make it appear as if it does.

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

2。 clear div

在父级中添加一个带有清除：两个的尾部div。这迫使父级包含浮动的子级。父级根据需要自动增加高度。默认情况下，所有浏览器中的空白div的高度为零，因此不需要为后面的div添加任何样式。

Add a trailing div with clear:both inside the parent. This forces the parent to contain the floated children. The parent automatically increases in height as needed. By default, an empty div has a height of zero in all browsers, so no additional styling is required for the trailing 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 。最终结果与添加清除div相同，但不需要添加其他HTML元素。像添加一个清除div，这迫使父级包含浮动的孩子。父项根据需要自动增加高度。

Add a clearfix rule to the CSS stylesheet, and add the class clearfix to the parent. The end result is the same as adding a clear div, but it doesn't require adding additional HTML elements. Like adding a clear div, this forces the parent to contain the floated children. The parent automatically increases in height as needed.

/* 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>

这篇关于Div不像它浮动的孩子的总高度那么高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！