have floating img/figure clear their side, to avoid "waterfalls"

I have many things floating to the right on the ttrpg site, where the
first would be most right, the second would be right but left of the
first thing, and so on. this forces those to clear their respective side
and create a quasi-column of things rather than making a bizarre ratchet
of content.

.......... A
.......... A
.......... B
(good)

vs.

.......... A
........ B A
(bad)

I can't see why I'd want the bad behavior on my other sites, but I'll
just mention that I didn't check to see what they were doing

Signed-off-by: Brian S. Stephan <bss@incorporeal.org>

incorporealcms/static/css/base.css

@@ -118,17 +118,20 @@ img {
 
 .img-center {
     display: block;
+    clear: both;
     margin-left: auto;
     margin-right: auto;
 }
 
 .img-left {
     float: left;
+    clear: left;
     margin-right: 1em;
 }
 
 .img-right {
     float: right;
+    clear: right;
     margin-left: 1em;
 }
 
@@ -144,12 +147,14 @@ figure {
 
 figure.right {
     float: right;
+    clear: right;
     margin-left: 10px;
     display: block;
 }
 
 figure.left {
     float: left;
+    clear: left;
     margin-right: 10px;
     display: block;
 }