html - 如何清除 float 的 img(侧边栏也 float )

Question

我需要有关 fiddle 的帮助

如果可能的话，我想清除最近的 float block 。

似乎如果页面上有一些 float block ，如果我在任何地方使用清除， float block 将被清除，即使它被放置在另一个 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在你的 html 中最后一个 <p>在 #content :

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

fiddle

也可以看看这篇文章Clearing floats