Wie man einen Absatz für HTML5 und CSS3 schwebt Programmierung - Dummies

Absätze und andere Elemente auf Blockebene haben in CSS3 ein klar definiertes Standardverhalten. Sie nehmen die gesamte Breite der Seite ein, und das nächste Element wird unten angezeigt. Wenn Sie das Element auf einen Absatz anwenden, ändert sich das Verhalten dieses Absatzes nicht wesentlich, aber das Verhalten von nachfolgenden Absätzen wird geändert.

Beginnen Sie mit einer Seite mit drei Absätzen. In Absatz 2 ist die Eigenschaft float auf left gesetzt.

Wie Sie sehen, wird hier eine seltsame Formatierung vorgenommen. Schauen Sie sich an, was vor sich geht:

• Den Absätzen wurden Umrandungen hinzugefügt. Wie Sie sehen werden, ist die Breite eines Elements nicht immer offensichtlich, wenn man den Inhalt betrachtet. Wenn Sie mit float herumspielen, sollten Sie den Absätzen Grenzen hinzufügen, damit Sie sehen können, was vor sich geht. Sie können die Ränder jederzeit entfernen, wenn sie richtig funktionieren.

• Der erste Absatz ist normal. Der erste Absatz hat das gleiche Verhalten, das Sie in allen blockartigen Elementen sehen. Es nimmt die gesamte Breite der Seite ein und das nächste Element wird darunter platziert.

• Der zweite Absatz ist ziemlich normal. Im zweiten Absatz ist das Attribut float auf left gesetzt. Dies bedeutet, dass der Absatz an seiner normalen Position platziert wird, der andere Text jedoch rechts von diesem Element platziert wird.

• Der dritte Absatz wirkt mager. Der dritte Absatz scheint den zweiten zu umgeben, aber der Text wird nach rechts verschoben. Der Float-Parameter im vorherigen Absatz führt dazu, dass dieser in einem verbleibenden Raum platziert wird (was momentan nicht viel ist). Der verbleibende Platz befindet sich rechts und schließlich unter dem zweiten Absatz.

Der Code, um dies zu erzeugen, ist einfaches HTML mit ebenso einfachem CSS-Markup:

floatDemo p {border: 2px black solid;}. floated {float: left;}

Float-Demo
Absatz 1. Dieser Absatz hat das normale Verhalten eines Block-Level-Elements. Es nimmt die gesamte Breite der Seite ein, und das nächste Element wird darunter platziert.
Absatz 2. Dieser Absatz wird nach links verschoben. Es wird links platziert, und das nächste Element wird rechts davon platziert.
Absatz 3. Dieser Absatz hat kein Fließkomma, Breite oder Rand. Es nimmt, was auch immer Platz es kann, rechts von dem schwebenden Element und fließt dann in die nächste Zeile.

Wie Sie dem Code entnehmen können, gibt es eine einfache Klasse mit dem Namen float, wobei die Eigenschaft float auf left gesetzt ist. Die Absätze sind auf gewöhnliche Weise definiert. Auch wenn Absatz 2 in Paragraph 3 im Screenshot eingebettet zu sein scheint, zeigt der Code deutlich, dass dies nicht der Fall ist.Die beiden Absätze sind vollständig getrennt.