相对定位，浮动将div从正常流中移出

Question

如何在使用float的情况下防止div脱离正常文档流，例如：

<div id="one">
    <div id="two"></div>
</div>

CSS：

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

现在 div "one" 没有高度，而 div "two" 看起来就像不在第一个 div 中一样。

- Emir Dupovac

Answer 1

Ahh，布局崩溃问题。这里有一篇关于浮动的优秀文章：http://css-tricks.com/all-about-floats/。针对你的情况，我会添加

。

overflow: auto

至 #one

以下是相关信息：

清除浮动的技巧

如果你总是知道接下来的元素是什么，你可以将 clear: both; 值应用于该元素并继续进行操作。这是理想的，因为它不需要任何花哨的技巧和额外的元素，使其完全语义化。当然，事情通常并不会那么顺利，我们需要在工具箱中有更多的浮动清除工具。

空 div 方法，就是一个空的 div 元素：<div style="clear: both;"></div>。有时你会看到使用 <br /> 元素或其他一些随机元素，但是 div 是最常见的，因为它没有浏览器默认样式，没有任何特殊功能，并且不太可能被通用 CSS 样式化。这种方法被语义纯粹主义者鄙视，因为它的存在对页面没有任何上下文意义，纯粹是为了呈现而存在。当然，在最严格的意义上，他们是正确的，但它能完成任务并且不会伤害任何人。

溢出方法 是依赖于设置父元素的 overflow CSS 属性来清除浮动。如果该属性在父元素上设置为 auto 或 hidden，则父元素会扩展以包含浮动，从而有效地清除它以供接下来的元素使用。这种方法可能非常语义化，因为它可能不需要额外的元素。但是，如果你发现自己只是为了应用这个样式而添加了一个新 div，那么它就和空 div 方法一样不合适，也不够灵活。还要记住，overflow 属性并不专门用于清除浮动。请注意不要隐藏内容或触发不必要的滚动条。

简单清除方法 使用一个聪明的 CSS 伪选择器 (:after) 来清除浮动。而不是在父元素上设置 overflow，你可以给它应用一个额外的类，比如 "clearfix"。然后应用这个 CSS：

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

这将在清除浮动的父元素之后应用一小段内容，该内容对用户不可见。但是，为了适应旧浏览器，需要使用其他代码。

- Barbara Laird

Answer 2

您看到了潜水 #1 的崩溃。为该元素添加CSS的overflow值应该可以解决这个问题。

- Meximize

Answer 3

这应该可以解决你的问题。尝试将其添加到两个 DIV 中：

**为了测试，您可能需要添加一些背景颜色。

在这里查看 jsFiddle 示例！

position: relative;
float: left;
clear: none;
display: block;

- Nikk