Bilder: float:left funktioniert nicht, float:right schon

[webeditor]

Hallo,

ich stehe vor einem etwas merkwürdigen (für mich jedenfalls) Problem:

CSS:

/* Bilder formatieren*/

article img {
	border : 1px solid Gray;
	border-radius: .2em;
	max-width: 100%;
	height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto }
	padding: 0;
}

.li {
	float : left;
	margin : .5em 1em .5em 0;	
}

.re {
	float : right;
	margin : .5em 0 .5em 1em;
}

.clear{
	clear : both;
}

article a img{
	display: inline;
}

Damit möchte ich erreichen:

• Bilder im Inhaltsbereich grundsätzlich zentriert
• außer: sie werden in die .li oder .re-Klasse gesteckt, dann sollen sie umlaufen werden
• Bilder innerhalb eines Links sollen inline angezeigt werden (z. B. pdf-Icon in einem Dokumenten-Link).

Ich möchte möglichst wenig mit CSS-Klassen im Inhalt selbst arbeiten - die Texte (incl. der bzw. möglichst vieler Bildlinks) werden in Markdown erstellt und mit HUGO in HTML-Seiten umgesetzt.

und wenn ich dann notiere:

<img class="re" src="/bilder/bild1.jpg" alt="">
<h3>Kapitel 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<br class="clear">

<img class="li" src="/bilder/bild2.jpg" alt="">
<h3>Kapitel2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<br class="clear">

dann floated das .re-Bild an den rechten Rand, aber das .li-Bild bildet einen 100%-Block und liegt selbst in der Mitte zentriert. Was läuft da falsch?

Grüße -B-