CSS 位置相对，float将div带出正常流

Position relative, float takes div out of the normal flow

提问by Emir Dupovac

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

如何防止将 div 从正常流程中取出但仍使用浮点数，如下所示：

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

CSS:

CSS：

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

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

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

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

回答by Barbara Laird

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

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

overflow: auto

to #one

到 #one

The relative info is quoted below:

相关资料引用如下：

Techniques for Clearing Floats

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.

The Empty Div Methodis, 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.

The Overflow Methodrelies 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.

The Easy Clearing Methoduses 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.

清除浮动的技巧

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

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;
}

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

回答by Meximize

You're seeing your dive #one collapse. Adding an overflow value to the CSS for that element should fix this problem.

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

回答by Borsn

This should solve your problem. Try adding it to both DIVs:

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

**For the sake of testing, you might want to add some background color.

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

jsFiddle example here!

jsFiddle 示例在这里！

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