Html 使用 float:left 后如何获得新行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2580772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I get a new line, after using float:left?
提问by user26270
What I am trying to do is have rows of images, 6 images in each row. Some of these images need to have another image floating on top of them (flush with the lower-right corner). I was able to get that to work from this thread:
我想要做的是多行图像，每行 6 个图像。其中一些图像需要在它们上面浮动另一个图像（与右下角齐平）。我能够从这个线程得到它的工作：
How do I position one image on top of another in HTML?
However, now I'm unable to get the new row after the 6th image. Neither <BR>or <P>create a new line. They simply push the next image down several pixels, but the image is still in the same line. It seems like the float style is interfering with the <BR>and/or <P>.
但是，现在我无法在第 6 张图像之后获得新行。无论是<BR>或<P>创建一个新行。他们只是将下一个图像向下推几个像素，但图像仍然在同一行中。似乎浮动样式干扰了<BR>和/或<P>。
I tried using different styles for the image that starts a new row, like float:noneand display:block, but neither worked. The odd thing is that the new line starts afterthe 7th image.
我尝试为开始新行的图像使用不同的样式，例如float:none和display:block，但都不起作用。奇怪的是，新行在第 7 个图像之后开始。
Here's what I'm using so far:
这是我目前使用的：
<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>
For the 7th image, when I'm trying to start a new row, I'm simply replacing the 'containerdiv' class with 'containerdivNewLine'.
对于第 7 个图像，当我尝试开始一个新行时，我只是将 'containerdiv' 类替换为 'containerdivNewLine'。
回答by Chad Birch
You need to "clear" the float after every 6 images. So with your current code, change the styles for containerdivNewLineto:
您需要在每 6 张图像后“清除”浮动。因此，使用您当前的代码，将样式更改为containerdivNewLine：
.containerdivNewLine { clear: both; float: left; display: block; position: relative; }
回答by Mironline
you can also use
你也可以使用
<br style="clear:both" />
回答by womp
Try the clearproperty.
试试clear属性。
Remember that float removes an element from the document layout - so yes, in a way it is "interfering" with brand ptags, in the sense that it would basically be ignoring anything in the main flow layout.
请记住，浮动从文档布局中删除了一个元素 - 所以是的，在某种程度上它“干扰”了br和p标签，从某种意义上说，它基本上会忽略主流程布局中的任何内容。
回答by Vlad
Also such way
还有这种方式
<br clear="all" />
回答by nick92675
Another approach that's a little more semantic is to have a UL defined as your total 6 image width, each LI defined as float left and width defined - so that when LI #7 hits, it runs into the boundry of the UL, and is pushed down to the new row. You'll still have an open float that you'll want to clear after the /UL - but that can be done on the next element of the page, or as a clear div. Here's sort of the idea, you may have to mess with actual values, but this should give you the idea. The code is a little cleaner.
另一种更语义化的方法是将 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>
