10

我怎样才能防止将 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 中。

4

3 回答 3

22

啊，崩溃问题。这里有一篇关于花车的优秀文章http://css-tricks.com/all-about-floats/ 在你的情况下，我会添加

overflow: auto

到#one

相关信息引用如下：

清除浮动的技术

如果您处于始终知道后续元素将是什么的情况下，则可以应用明确的：两者；重视该元素并开展您的业务。这是理想的，因为它不需要花哨的技巧，也不需要额外的元素，使其具有完美的语义。当然，事情通常不会这样，我们需要在我们的工具箱中拥有更多的浮动清除工具。

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

溢出方法依赖于在父元素上设置溢出 CSS 属性。如果此属性在父元素上设置为 auto 或 hidden，则父元素将展开以包含浮动，有效地为后续元素清除它。这种方法可以是精美的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加一个新的 div 只是为了应用它，那么它与空 div 方法一样没有语义并且适应性较差。另请记住，溢出属性并非专门用于清除浮点数。注意不要隐藏内容或触发不需要的滚动条。

Easy Clearing Method使用巧妙的 CSS 伪选择器(:after)来清除浮动。与其在父级上设置溢出，不如向其应用一个附加类，如“clearfix”。然后应用这个 CSS：

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

这将在清除浮动的父元素之后应用一小部分内容，从视图中隐藏。这还不是全部，因为需要使用额外的代码来适应旧浏览器。

于 2013-09-20T00:24:05.430 回答
1

你看到你的潜水#one 崩溃了。向该元素的 CSS 添加溢出值应该可以解决此问题。

于 2013-09-20T00:16:21.820 回答
0

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

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

jsFiddle 示例在这里！

position: relative;
float: left;
clear: none;
display: block;
于 2013-09-20T00:16:10.067 回答