相对位置，float将div移出正常流程 [英] Position relative, float takes div out of the normal flow

问题描述

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

How can i prevent taking div out of the normal flow but still using float, like this:

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

CSS：

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

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

现在divone没有高度，divtwo它不在第一个div。

Now div "one" has no height and div "two" just looks like it isn't in the first div.

推荐答案

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

Ahh, the collapse problem. There's an excellant article about floats here http://css-tricks.com/all-about-floats/ In your case, I'd add

overflow: auto

至 #one

相关信息如下：

清除浮动的技巧

如果你处在一种你总是知道的情况什么是成功的元素，你可以应用clear：both;价值到这个元素，去做你的业务。这是理想的，因为它不需要花哨的黑客和没有额外的元素，使它完全语义。当然，事情通常不会这样工作，我们需要在工具箱中有更多的浮动清理工具。

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.

空Div方法是，真的，一个空的div。 < div style =clear：both;>< / div> 。有时你会看到一个< br /> 元素或一些其他随机元素，但div是最常见的，因为它没有浏览器默认样式，不有任何特殊的功能，并不大可能是一般的CSS样式。这种方法被语义纯粹主义鄙视，因为它的存在对于页面没有任何相互联系的意义，并且纯粹是为了呈现。当然，在最严格的意义上，他们是对的，但它得到正确的工作，不伤害任何人。

The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn't hurt anybody.

溢出方法在父元素上设置溢出CSS属性。如果此属性在父元素上设置为自动或隐藏，则父级将展开以包含浮动，从而有效地清除后续元素。这种方法可以是精美的语义，因为它可能不需要额外的元素。但是，如果你发现自己添加了一个新的div，只是为了应用这个，它同样无意义的空div方法和较少适应。还要记住，overflow属性不是专门用于清除浮点。

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.

轻松清除方法使用聪明的CSS伪选择器（ ：after）以清除浮动。而不是在父设置溢出，你应用一个额外的类像clearfix。然后应用此CSS：

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:

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

这将应用一小部分内容，元素清除浮动。这不是完全的故事，因为额外的代码需要用于适应旧的浏览器。

This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn't quite the whole story, as additional code needs to be used to accomodate for older browsers.

不同的场景需要不同的浮动清除方法。例如，一个块的网格，每个不同的类型。

Different scenarios call for different float clearning methods. Take for example a grid of blocks, each of different types.

这篇关于相对位置，float将div移出正常流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！