Wie die Clear-Attribut Steuerung Seitenlayout für HTML5 und CSS3 Programmierung verwenden

Es sollte eine gewisse Art und Weise sein, um die Form der Arbeit richtig zu machen, unabhängig von der Breite des Containers. CSSS3 liefert genau einen solchen Mechanismus, der leicht zu handhaben ist, wenn Ihre HTML5-Seiten ist.

Das klar Attribut wird auf Elemente mit ein gebrauchtes schweben Attribut. Das klar Attribut kann eingestellt werden links, Recht, oder beide. Einstellen der klar zuschreiben links bedeutet, dass Sie nichts auf der linken Seite dieses Elements soll. Mit anderen Worten sollte das Element auf der linken Rand des Containers sein. Jedes Etikett sollte seine eigene Linie, beginnen, so setzen Sie seine klar zuschreiben links.

Um die Taste auf seine eigene Linie zu erzwingen, setzen Sie den klar zuschreiben beide. Das bedeutet, daß die Taste keine Elemente nach links oder rechts haben sollte. Es sollte eine Linie alle ihre eigenen besetzen.

Wenn Sie ein Element, wollen eine neue Zeile zu beginnen, setzen beide ihren schweben und klar Attribute links. Wenn Sie ein Element wollen allein auf einer Linie zu sein, setzen Sie schweben nach links und klar nach beide.

Verwendung der klar Attribut können Sie eine flexible Breiten Behälter zu haben und immer noch eine angemessene Kontrolle der Formularentwurf halten. Die Form kann die gleiche Breite wie die Seite und immer noch korrekt funktionieren. Diese Version funktioniert, unabhängig von der Breite der Seite.

Hier ist der letzte CSS-Code, einschließlich klar Attribute in den Etiketten und Knopf:

/ * FloatForm.cssCSS Datei mit Schwimmer formDemonstrates Verwendung von float, Breite, Marge und klar * / fieldset zu gehen {background-color: # AAAAFF-} label {clear: left; float: left; width: 5em-text-align : right; margin-right: .5em-} Eingang {float: left; background-color: # CCCCFF-} Taste {float: left; clear: both-margin-left: 7em-margin-top: 1em-background-color : # 0000CC-color: # FFFFFF-}