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; }

明确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

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