Was nützt style = "clear: both"?

98

Ich habe zufällig einen gesehen, divder den Stil hatte clear:both! Was nützt clearin style?

<div style="clear:both">
html css thomasbabuj
quelle

Antworten:

249

clear:both Lässt das Element unter alle schwebenden Elemente fallen, die im Dokument davor stehen.

Sie können auch verwenden clear:leftoder clear:rightfestlegen, dass es nur unter die Elemente fällt, die nach links oder rechts verschoben wurden.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+
RichieHindle
quelle
2
Außerdem wird das übergeordnete Div an die Höhe angepasst.
Oleg
@Jason, der Fehler, auf den Sie sich beziehen, gilt nur für Internet Explorer 6 unter Windows XP. Es ist gut, dass wir es heutzutage meistens nicht unterstützen müssen.
Jewgenij Afanasjew
5
@ YevgeniyAfanasyev, ja, das ist wahr. Mein Kommentar stammt aus dem Jahr 2009, als das noch zutraf.
Jason
20

Um die Antwort von RichieHindle zu ergänzen, lesen Sie Floatutorial , das Sie durch die Funktionsweise von CSS Floating und Clearing führt.

Paul Dixon
quelle
1
Am 15. Februar 2016 konnte ich für Floatutorial keine Verbindung zum Server herstellen (Verbindung an Port 80 abgelehnt).
Dlu
3

Wenn Sie float ohne Breite verwenden, bleibt in dieser Zeile etwas Platz. Um diesen Raum zu blockieren, können Sie ihn clear:both;im nächsten Element verwenden.

imdad
quelle