使用float：left后，如何获得新行？

我想做的是有几行图像，每行6张图像。其中一些图像需要在其顶部浮动另一个图像（与右下角齐平）。我能够通过此线程使它起作用：

如何在HTML中将一个图像放置在另一个图像之上？

但是，现在我无法在第6张图像之后获得新行。无论是<BR>或<P>创建一个新行。他们只是将下一幅图像向下推几个像素，但图像仍在同一行中。似乎float样式正在干扰<BR>and / or <P>。

我尝试对开始新行的图像使用不同的样式，例如float:none和display:block，但均无效。奇怪的是新行开始于第7张图片。

到目前为止，这是我正在使用的内容：

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.containerdivNewLine { float: none; display: block; position: relative; } 
.cornerimage { position: absolute; bottom: 0; right: 0; } 
</style>

<div class="containerdiv">
  <img border="0" height="188" src="myImg" width="133" />
  <img class="cornerimage" height="140" src="imageOnTop" width="105" />
</div>

对于第7张图片，当我尝试开始新行时，我只是将“ containerdiv”类替换为“ containerdivNewLine”。

您需要在每6张图像后“清除”浮动。因此，使用您当前的代码，将样式更改为containerdivNewLine：

.containerdivNewLine { clear: both; float: left; display: block; position: relative; } 

你也可以使用

<br style="clear:both" />

尝试清除属性。

请记住，float从文档布局中删除了一个元素-是的，在某种意义上说，它基本上会忽略主流布局中的任何内容，因此会“干扰”br和“p标记” 。

也这样

<br clear="all" />

语义上的另一种方法是将UL定义为您总共6个图像宽度，每个LI定义为向左浮动并定义宽度-因此，当LI＃7命中时，它会进入UL的边界并被推送向下到新行。您仍然需要在/ UL之后清除一个开放的浮动，但是可以在页面的下一个元素上完成，也可以将其作为一个清晰的div。这是一个主意，您可能必须弄乱实际值，但这应该可以给您这个主意。该代码更加简洁。

 <style type="text/css"> 
ul#imageSet { width: 600px; margin: 0; padding:0; }
ul#imageSet li { float: left; width: 100px;  height: 188px; margin: 0; padding:0; position: relative; list-style-type: none; }
.cornerimage { position: absolute; bottom: 0; right: 0; } 
h3.nextelement { clear: both; }
</style>


<ul id="imageSet">
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
     <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
</ul>


<h3 class="nextelement">Next Element in Doc</h3>