Bilder
Ein Bild an der Wand über dem Sofa ohne einen schmucken, goldenen Rahmen war früher undenkbar, auf einer Website wird ein Bild als Link per default mit einem blauen Rand dargestellt. Inzwischen kann ein Bild ein unterschiedliches Stück Rahmen auf jeder Seite haben.
Bild umfliessen lassen
float: margin:
Die Bildhöhe bestimmt den Zeilenabstand. Es sei denn man lässt das Bild z.B. links schweben, damit es rechts umflossen wird. Auch Absätze und Titel umfliessen das Bild.
.bi4 { float:left; margin-right:20px; margin-bottom:20px}. Nebst float:left; gibt es auch noch float:right; und float:none;. Das none bedeutet aber nur, dass das so ausgezeichnete Element nicht umflossen wird, nicht dass es selber nichts umfliesst.
Es wurde auch noch ein Abstand nach rechts und nach unten angegeben. Es ist möglich, alle vier Abstände einheitlich margin:20px; oder unterschiedlich margin-top:10px; margin-bottom:5px; margin-left:0px; margin-right:20px; festzulegen.
clear:
Das erste Element, welches nicht mehr mitfliessen soll, muss vom Umfliessen abgehalten werden; es bricht dann den Bann.
.fertigfluss { clear:both;} Einseitig stoppen ist auch möglich durch clear:left; oder clear:right;, clear:none; sagt einem Element, dass es umfliessen soll (falls überhaupt ein float gesetzt wurde).
Na ja, manchmal ist das umflossene Bild auch nicht so hoch, dann läuft der Text auch ohne clear unterhalb des Bildes weiter. Aber ein etwas komplexeres Layout kann böse durcheinander geraten, wenn das Floaten nicht gestoppt wird.
Übrigens können auch Absätze und div-Container floaten, also umflossen werden, auch mit der exakt gleichen Klasse, die Angaben sind nicht auf Bilder beschränkt.
Für Layouts (ohne Tabellen) ist die float-Angabe unverzichtbar.
Bilderrahmen
border: border-color: border-width: border-style:
Ein Bild kann einen Rahmen haben, in den selben Variationen wie beim Text beschrieben. Aber mit schon relativ simplen Border-Styles lassen sich tolle Effekte erzielen:
.bi5 { border:solid 4px green; margin:20px; }
.bi6 { padding:10px; border:solid 1px Black; margin:20px; }
.bi7 { border-bottom: solid 20px Gold; margin:20px; }
.bi8 { padding:10px; background-color:Black; border:solid 3px Green; margin:20px; }
.bi9 { padding:20px; background: #483db8 url(images/bambusrohr.jpg); border:solid 5px Black; margin:20px; }
Mit CSS3 soll man dann auch Bilder als Rahmen verwenden können. Im 5. Bild oben scheint ja nur ein Hintergrundbild durch das Padding.
Natürlich lassen sich mehrere Container ineinander stapeln und damit abgefahrene Rahmen zusammen bauen. Mehr über Rahmeneffekte bei Hintergrundbilder.
Vertikale Bildausrichtung
Hin und wieder möchte man ein kleines Bild nicht einfach auf die Grundlinie einer Zeile stellen.
vertical-align:
Da hängt ein Bild 
an einer Zeile. .bi1 { vertical-align:text-top;}
Das ist ein Bild in einer Zeile. .bi2 { vertical-align:middle;}
Das steht ein Bild auf einer Zeile. .bi3 { vertical-align:text-bottom;}
Aber so sieht es auch ohne Styleangabe aus.
Check den Code.