CSS-不需要元素在我的浮动元素下方

如何解决CSS-不需要元素在我的浮动元素下方

| 我有一个带有\“ sidebar \\”文本的浮动div。其父容器也有文本。 我不想在浮动的“侧边栏” div下方添加文本： 示例http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png 我怎样才能解决这个问题？

<div id=\"parent\">
    <div id=\"floated\" style=\"float:right\">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

    

解决方法

如果没有其他问题，可以使用

overflow: hidden

或

overflow: auto

修复此问题：

<div id=\"parent\">
    <div id=\"floated\" style=\"float:right\">Foo bar</div>
    <div class=\"next-to-float\" style=\"overflow: hidden;\">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

参见http://jsfiddle.net/pauldwaite/YL5P3/ 我在这里已对此进行了更全面的介绍，包括使它能够在IE 6中工作的代码：xHTML / CSS：如何使内部div的宽度变为100％减去另一个div的宽度 我仍然不太了解为什么

overflow: hidden

这样做的原因，但我知道它确实遵循CSS规范。     ,在非浮动元素上设置右边距 JSFiddle 唯一的要求是必须预先定义浮动元素的宽度。然后，它可以具有您喜欢的任何高度，并且非浮动内容（当应用了右边距时）不会在浮动元素下伸展。 怎么运行的？ 我们在右边浮动了width = X的元素 我们具有通常的内容，但是将其右边距设置为X + s，其中s是您的内容和浮动元素之间的一些预定义空间，因此它们不会接触。 就是这样。 由于您有多个内容元素（标题，段落），因此必须使用正确的边距设置将它们放入容器中。

<div id=\"parent\">
    <div id=\"floated\">Foo bar</div>
    <div id=\"content\">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

和CSS：

#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

为什么此解决方案比设置主要内容宽度更好？ 因为设置主要内容宽度仅在要将文档内容限制为固定宽度（例如960网格）时才有效。但是，当您希望内容扩展到整个浏览器窗口宽度时，无论浏览器窗口大小如何，此解决方案都可以使用。 和一个小建议 尽可能避免使用内联样式，因为应用程序/站点的可维护性将成为噩梦。     ,您可以在容器内嵌套2个div标签。浮动它们两个，并根据需要调整它们的大小。     ,在浮动元素上设置等于余数长度的底部边距。或为较大的元素添加宽度，然后沿另一个方向浮动。

<div id=\"parent\">
    <div id=\"floated\" style=\"width:200px; float:right\">Foo bar</div>
    <div id=\"content\" style=\"width:600px; float:left\">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

要么

<div id=\"parent\">
    <div id=\"floated\" style=\"width:200px; margin-bottom:200px; float:right\">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

    ,只需在[P]标签中添加宽度即可轻松实现 例

<div id=\"parent\">
    <div id=\"floated\" style=\"float:right\">Foo bar</div>
    <h2>Foo</h2>
    <p style=\" width: 500px; \">Text!</p>
</div>

例如您的（id = \“ parent \”）的宽度为800px 和（id = \“ floated \”）右侧栏的宽度为200px 然后将您的[P] 800px-200px = 600px 因此将[P]宽度设置为600px - - - - - 要么 如果要在文本和条形之间留一些间距，请使[P]宽580px 表示空间为20px