Schwimmende Elemente tutorial


Wie bereits erwähnt, belegen Blockelemente die gesamte Breite des zulässigen Bereichs (das untergeordnete Element) und beginnen ebenfalls mit einer neuen Zeile. Alle Elemente nach dem Block beginnen auch mit einer neuen Zeile im Layout der Webseite.

Wenn Sie die Breite eines Elements mit der Eigenschaft fixieren width , dann ist es möglich, den Fluss um dieses Element durch andere zu setzen. Diese Eigenschaft hat den Namen float , wie es scheint, dass das Element " плывет "in der Umgebung von anderen Elementen - nach links oder nach rechts.So hat diese Eigenschaft zwei Grundwerte - left oder right . Mit dem Wert left Das Element wird an die linke Kante gedrückt, und die Umströmung der anderen Elemente erfolgt entlang der rechten Kante. Mit dem Wert right - Rundherum. Beachten Sie, dass Sie dazu die Breite des Elements festlegen müssen. Auch float kann einen Unterschied machen none - Es ist standardmäßig installiert.



Wir sehen, dass der Text außerhalb des Blocks rechts davon liegt. In Ermangelung einer Regel float:left Dieser Text würde unter dem Block platziert - entsprechend den Eigenschaften der Blockelemente.

Um das Umbrechen abzubrechen, fügen Sie einfach das Element mit der Regel clear ein: beide nach dem Element mit der Regel float . Eigentum clear Optimieren Sie die Straffung für die Elemente, die danach angezeigt werden. Bedeutung both bedeutet, dass jegliche Straffung - links oder rechts - abgebrochen wird. Eigentum clear kann auch Werte annehmen left oder right - um den gleichen Immobilienwert zu stornieren float . Diese Regel wird häufig verwendet, um eine Leerzeile zwischen zwei Floating-Elementen einzufügen.



Eigenschaft float hat seine eigenen Eigenschaften, die zu unerwarteten Ergebnissen führen können. Einer von ihnen ist die folgende Situation. Nehmen wir an, wir setzen einen Block in einen anderen, und der innere Block hat eine Regel float: left



Wir sehen, dass die schwebende Einheit den äußeren nicht zurückhält und über seine Grenzen hinausgeht. Um diesen Effekt zu korrigieren, müssen Sie eine Regel hinzufügen

overflow: hidden;


pro Block bar :

Проверьте свои знания
Erstelle Stilregeln für die Blumenklasse, unter denen das Element nach rechts "schwimmen" wird. Erstellen Sie die folgenden Stilregeln für das img-Tag innerhalb des Blocks dieser Klasse: height 50px; äußerer Einzug nach links 50px. Verwenden der Zeichnung füge einen Blumenblock mit einem Bild in die Kopfzeile ein, so dass es an den linken Rand der Kopfzeile gedrückt wird. Das Muster-Tag muss in einem Block der Blumenklasse platziert werden. Legen Sie die Bilddatei in den Ordner "img" im Projektstammverzeichnis. Erstellen Sie ein Formular-Tag. Im Inneren des Kontakt-Formular Block vor der Form der Überschrift Text Kontaktformular, Textfarbe # 403E3F einzufügen.