Float und Clear

Mit float schiebst du ein Element nach links oder rechts. Der umgebende Text fließt daneben vorbei. Für Layouts nutzt du heute eher Flexbox oder Grid – float bleibt aber wichtig für Bilder im Fließtext.

Was ist float?

Ein floatendes Element wird an den linken oder rechten Rand seines Containers geschoben. Im Gegensatz zu position: absolute fließt Text weiterhin daneben. Die wichtigsten Werte:

• float: left – Element schwebt links, Inhalt fließt rechts daran vorbei
• float: right – Element schwebt rechts, Inhalt fließt links daran vorbei
• float: none – kein Float, Standardverhalten

float: left

Das Element rutscht nach links, der Inhalt nutzt den Platz rechts daneben – typisch für Bilder im Fließtext.

1.box {
2    float: left;
3    width: 120px;
4    margin-right: 16px;
5}

float: right

Spiegelverkehrt zu float: left: Das Element steht rechts, der Inhalt fließt links daran vorbei.

1.box {
2    float: right;
3    width: 120px;
4    margin-left: 16px;
5}

float: none

Der Standardwert – das Element bleibt im normalen Fluss. Nützlich, um Float in Media Queries wieder aufzuheben.

1.box {
2    float: none;
3}

clear

Mit clear bestimmst du, ob ein Element neben floatenden Elementen stehen darf oder erst darunter beginnt.

1.footer {
2    clear: both;
3}

clear: left, right und both

Mögliche Werte:

• clear: left – Element beginnt unterhalb aller links floatenden Elemente
• clear: right – Element beginnt unterhalb aller rechts floatenden Elemente
• clear: both – Element beginnt unterhalb aller floatenden Elemente (links und rechts)
• clear: none – kein Clear, Standardverhalten

1.element {
2    clear: left;   /* unterhalb aller links floatenden Elemente */
3}
4
5.element {
6    clear: right;  /* unterhalb aller rechts floatenden Elemente */
7}
8
9.element {
10    clear: both;   /* unterhalb aller floatenden Elemente */
11}

Float-Container bereinigen (Clearfix)

Floatende Kinder werden vom Eltern-Container oft nicht mehr in der Höhe erkannt. Ein Clearfix mit einem Pseudo-Element behebt das.

1.container::after {
2    content: "";
3    display: table;
4    clear: both;
5}

Für neue Layouts nutze Flexbox oder Grid. float eignet sich vor allem, wenn Text um Bilder oder Infoboxen fließen soll.