Question

我如何防止div退出正常流程但仍然使用float，如下所示：

<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中。

Answer 1

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

overflow: auto

到#one

相关信息如下：

清除浮动的技巧

如果您处于一种您总是知道成功的情况   元素将是，你可以应用明确：两者;对此有价值   元素，并开展您的业务。这是理想的，因为它不需要   花哨的黑客，没有其他元素使它完美的语义。   当然，事情通常不会那样，我们需要   我们的工具箱中有更多浮动清除工具。

空Div方法，实际上是一个空div。 <div style="clear: both;"></div>。有时您会看到<br />元素   或者使用其他一些随机元素，但div是最常见的因为   它没有浏览器默认样式，没有任何特殊功能，   并且不太可能通过CSS进行通用样式。这个方法是   被语义纯粹主义者嘲笑，因为它的存在没有任何背景   完全意味着页面，纯粹是为了演示。的   从最严格的意义上说，他们是正确的，但它完成了工作   对，并没有伤害任何人。

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

Easy Clearing Method 使用聪明的CSS伪选择器(:after)来清除浮点数。而不是设置溢出   父，您应用其他类，如“clearfix”。然后   应用此CSS：
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
这将应用一小段内容，隐藏在视图之后清除浮动的父元素。这不完全是一个整体故事，因为需要使用额外的代码来适应旧的浏览器。

Answer 2

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

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

jsFiddle example here!

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

Answer 3

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

位置相对，浮动将div从正常流量中取出

3 个答案: