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

Question

我想要做的是有一排图像,每行6张图像.其中一些图像需要在其上方浮动另一个图像(与右下角齐平).我能够从这个线程得到它:

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

但是,现在我无法在第6张图像之后获得新行.无论是<BR>或<P>创建一个新行.他们只需将下一个图像向下推几个像素,但图像仍然在同一行.看起来浮动风格正在干扰<BR>和/或<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张图片,当我尝试开始一个新行时,我只是用'containerdivNewLine'替换'containerdiv'类.

Answer 1

你需要在每6张图像后"清除"浮动.因此,使用当前代码,将样式更改为containerdivNewLine:

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

Answer 2

你也可以用

<br style="clear:both" />