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

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