28

我有一个 div 包裹着两个孩子，一个向左浮动，另一个向右浮动。我想在孩子周围放置边框和背景，但 div 的高度为 0，因为它不会调整大小以适应孩子。

这是它的一个例子：http: //jsfiddle.net/VVZ7j/17/

我希望红色背景一直向下。我试过 height:auto，但没有用。

任何和所有的帮助将不胜感激，谢谢。

PS如果可能的话，我不想使用任何javascript。

4

5 回答 5

62

这是使用浮点数时的常见问题。有几种常见的解决方案，我根据个人喜好订购了（最好的方法优先）：

  1. 使用 ::after CSS 伪元素。这被称为“clearfix”，适用于 IE8 及更高版本。如果您需要与早期版本的 IE 兼容，这个答案应该会有所帮助。例子。

    .parentelement::after {
    content: "";
    display: table;
    clear: both;
}

  2. 将两个浮动添加到具有 CSS 属性的容器中overflow: auto或overflow: hidden. 但是，这种方法可能会导致问题（例如，当工具提示与父元素的边缘重叠时，会出现滚动条）。例子。

    <div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  3. 向父元素添加设置高度。例子。

    <div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  4. 使父元素浮动。例子。

    <div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  5. 在浮动后添加一个 div clear: both。例子。

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
于 2012-06-10T13:21:46.713 回答
5

添加overflow: hidden;到#wrap。这是一个clear fix. 这里有一些关于它的文档：http: //positioniseverything.net/easyclearing.html

LE：也有多种方法可以实现这一点，具体取决于浏览器的兼容性：

  1. 添加溢出：隐藏到父容器。

#wrap { overflow: hidden; }

  1. 使用伪元素添加clear: both.

#wrap:after { clear: both; content: ""; display: table;}

  1. 最常用的技术是添加一个额外的作为父容器的最后一个元素。

<div style="clear:both"></div>

not当您获得额外的 HTML 标记时，我更喜欢使用第 3 个。

于 2012-06-10T13:19:45.657 回答
3

尝试添加overflow: hidden到您的#wrap div.

于 2012-06-10T13:21:43.453 回答
2

我开始使用 Nicolas Gallagher 提供的这种“micro-clearfix”解决方案。

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

只需将其添加到您的 CSS 和任何浮动元素中，将“cf”类添加到任何具有浮动子元素的任何元素的包装器中。

于 2012-06-10T13:32:51.727 回答
0

只需在关闭外部 div 之前再添加一个样式为 clear:both的 div，即此处“换行”

--示例代码--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>
于 2012-06-10T13:26:04.230 回答