Question

我需要fiddle

的帮助

如果可能的话，我想清除最近的浮动块。

似乎页面上有一些浮动块，如果我在任何地方使用clear，浮动块将被清除，即使它被放在另一个div中。

HTML

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
</nav>

<div id="content">
    <img src="http://www.lazne-belohrad.cz/soubory/tinymce/!titulni_obrazky/knihy.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien. In rutrum. Integer in sapien. Nam quis nulla. Aliquam ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
        <p id="INeedThisUnderImg">This "cleared:left" paragraph clears "nav floated left". Is any way to clear only floated img?  I would like this paragraph under img. I could user position absolute for nav, but if content is only few words, nav overflows footer :(</p>
</div>

    <footer>
        <p>Footer</p>    
    </footer>

CSS

nav {
    float:left;
    border: 1px solid black;
    width: 100px;
}
div#content {
    border: 1px solid black;
    margin-left: 110px;
}
div#content img {
    float: left;
}

div#content p#INeedThisUnderImg{
    clear: left;
}

footer{
    border: 1px solid black;
    margin-top: 10px;
}

谢谢你，对不起我的英语。

Answer 1

一种解决方案是从此元素中删除clear:left：

div#content p#INeedThisUnderImg {
    clear: left;/*Remove this*/
}

并在此元素clear:left之后的html中添加#content：

<br style="clear:left;" />

fiddle

如果你想要在图像下表现出色，你就可以这样：

div#content p#INeedThisUnderImg {
    float: left;/*Add this*/
}

并在clear:left中的<p>之后的html中添加#content：

<br style="clear:left;" />

fiddle

另请参阅本文Clearing floats

如何清除浮动图像（侧边栏也浮动）

1 个答案: