210

Ich möchte fragen, wie Höhe und Schwimmer funktionieren. Ich habe eine äußere und eine innere Abteilung, die Inhalt enthält. Seine Höhe kann je nach Inhalt des inneren Div variieren, aber es scheint, dass mein innerer Div seinen äußeren Div überlaufen wird. Was wäre der richtige Weg, um es zu tun?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    	    <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>

html css css-float Junge Pasmo
quelle

Mögliches Duplikat von CSS: Min-Höhe funktioniert nicht oder CSS: Div-Höhenproblem am Float-Set

Shauna

nett und sehr gut danke!

Bassam Alugili

Mögliches Duplikat von schwebendem Material innerhalb eines Div, schwebt außerhalb von Div. Warum?

Oriol

581

Die schwebenden Elemente erhöhen nicht die Höhe des Containerelements. Wenn Sie sie nicht löschen, erhöht sich die Containerhöhe nicht ...

Ich zeige dir visuell:

Geben Sie hier die Bildbeschreibung ein

Weitere Erläuterungen:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

Sie können auch overflow: hidden;Containerelemente hinzufügen , aber ich würde vorschlagen, dass Sie clear: both;stattdessen verwenden.

Auch wenn Sie ein Element selbst löschen möchten, können Sie es verwenden

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

Wie funktioniert CSS Float?

Was ist float genau und was macht es?

Das floatAnwesen wird von den meisten Anfängern missverstanden. Was genau macht floatdas? Ursprünglich wurde die floatEigenschaft eingeführt, um Text um Bilder zu fließen, die schwebend leftoder schwebend sind right. Hier ist eine weitere Erklärung von @Madara Uchicha.
Ist es also falsch, die floatEigenschaft zu verwenden, um Kisten nebeneinander zu platzieren? Die Antwort ist nein ; Es ist kein Problem, wenn Sie die floatEigenschaft verwenden, um Boxen nebeneinander zu setzen.
Wenn Sie ein Element inlineoder eine blockEbene schweben lassen, verhält sich das Element wie ein inline-blockElement.
Demo
Wenn Sie ein Element leftoder schweben lassen right, wird das widthElement auf den Inhalt beschränkt, den es enthält, es widthsei denn, es ist explizit definiert ...
Sie können kein floatElement center. Dies ist das größte Problem, das ich bei Anfängern immer gesehen habe. Dies ist ~~float: center;~~kein gültiger Wert für die floatImmobilie. floatwird im Allgemeinen verwendet, floatum Inhalte nach ganz links oder ganz nach rechts zu verschieben . Es gibt nur vier gültige Werte für floatEigenschaft , dh left, right, none(Standard) und inherit.
Übergeordnetes Element wird reduziert, wenn es schwebende untergeordnete Elemente enthält. Um dies zu verhindern, verwenden wir die clear: both;Eigenschaft, um die schwebenden Elemente auf beiden Seiten zu löschen, wodurch das Reduzieren des übergeordneten Elements verhindert wird. Für weitere Informationen können Sie meine andere Antwort hier verweisen .
(Wichtig) Denken Sie daran, wo wir einen Stapel verschiedener Elemente haben. Wenn wir verwenden float: left;oder sich float: right;das Element um eins über den Stapel bewegt. Daher verbergen sich die Elemente im normalen Dokumentfluss hinter den schwebenden Elementen, da sie sich auf Stapelebene über den normalen schwebenden Elementen befinden. (Bitte beziehen Sie sich nicht darauf, z-indexda dies völlig anders ist.)

Nehmen Sie einen Fall als Beispiel, um zu erklären, wie CSS-Floats funktionieren, vorausgesetzt, wir benötigen ein einfaches 2-Spalten-Layout mit Kopf-, Fuß- und 2-Spalten. Hier ist also, wie die Blaupause aussieht ...

Geben Sie hier die Bildbeschreibung ein

Im obigen Beispiel schweben nur die roten Kästchen, entweder können Sie floatbeide zum leftoder Sie können floatzum leftund ein anderes rightauch, abhängig vom Layout. Wenn es 3 Spalten sind, können Sie float2 Spalten zu lefteinem anderen eine rightdavon hängt davon ab, obwohl wir in diesem Beispiel ein vereinfachtes 2-Spalten-Layout haben, so dass floateine davon leftund die andere von der right.

Markup und Stile zum Erstellen des Layouts werden weiter unten erläutert ...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

Lassen Sie uns Schritt für Schritt mit dem Layout fortfahren und sehen, wie float funktioniert.

Zunächst einmal verwenden wir das Haupt - Hüllenelement, können Sie einfach davon ausgehen , dass es Ihr Ansichtsfenster ist, dann verwenden wir headerund weisen eine heightvon 50pxso nichts Besonderes gibt. Es ist nur ein normales nicht schwebendes Element auf Blockebene, das 100%horizontalen Raum einnimmt, es sei denn, es schwebt oder wir weisen inline-blockes zu.

Der erste gültige Wert für floatist leftso , dass wir in unserem Beispiel float: left;für verwenden .floated_left, sodass wir beabsichtigen, einen Block in das leftElement unseres Containers zu verschieben.

Die Säule schwebte nach links

Und ja, wenn Sie sehen, dass das übergeordnete Element, das reduziert .wrapperist , das Element, das Sie mit einem grünen Rand sehen, nicht erweitert wurde, aber es sollte richtig sein? Wir werden in einer Weile darauf zurückkommen, für den Moment haben wir eine Kolumne, zu der wir schwebten left.

Wenn Sie zur zweiten Spalte kommen, lassen Sie floatdiese in dieright

Eine weitere Säule schwebte nach rechts

Hier haben wir eine 300pxbreite Säule, die wir floatzu der right, die neben der ersten Säule sitzt, wenn sie zu der schwimmt left, und da sie zu der geschwommen ist, lefthat sie eine leere Rinne zu der geschaffen right, und da auf der rightunsere reichlich Platz war rightDas schwebende Element saß perfekt neben dem lefteinen.

Trotzdem ist das übergeordnete Element reduziert. Nun, lassen Sie uns das jetzt beheben. Es gibt viele Möglichkeiten, um zu verhindern, dass das übergeordnete Element reduziert wird.

Fügen Sie ein leeres Element auf Blockebene hinzu und verwenden Sie es, clear: both;bevor das übergeordnete Element endet, das schwebende Elemente enthält. Jetzt ist dieses Element eine kostengünstige Lösung für clearIhre schwebenden Elemente, die die Arbeit für Sie erledigt. Ich würde jedoch empfehlen, dies nicht zu verwenden.

Fügen Sie <div style="clear: both;"></div>vor den .wrapper divEnden wie hinzu

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

Nun, das behebt sich sehr gut, kein zusammengeklapptes übergeordnetes overflow: hidden;Element mehr, aber es fügt dem DOM unnötiges Markup hinzu, so dass einige vorschlagen, es für das übergeordnete Element zu verwenden, das schwebende untergeordnete Elemente enthält, die wie beabsichtigt funktionieren.

Verwenden Sie overflow: hidden;auf.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

Das erspart uns jedes Mal ein Element, clear floataber da ich verschiedene Fälle damit getestet habe, ist es in einem bestimmten Fall fehlgeschlagen, der box-shadowfür die untergeordneten Elemente verwendet wird.

Demo (Kann den Schatten nicht auf allen 4 Seiten sehen,overflow: hidden;verursacht dieses Problem)

So was nun? Speichern Sie ein Element, und versuchen Sie overflow: hidden;es mit einem eindeutigen Fix-Hack. Verwenden Sie das folgende Snippet in Ihrem CSS. overflow: hidden;Rufen Sie genau wie beim übergeordneten Element das folgende Element für das übergeordnete Element auf, classum sich selbst zu löschen.

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

Hier funktioniert der Schatten wie beabsichtigt. Außerdem wird das übergeordnete Element selbst gelöscht, wodurch ein Zusammenbruch verhindert wird.

Und schließlich verwenden wir die Fußzeile, nachdem wir cleardie schwebenden Elemente erstellt haben.

Demo

Wann wird float: none;sowieso verwendet, da es die Standardeinstellung ist, also eine Verwendung zum Deklarieren float: none;?

Nun, es hängt davon ab, ob Sie diesen Wert häufig verwenden, wenn Sie möchten, dass Ihre schwebenden Elemente mit einer bestimmten Auflösung untereinander gerendert werden. Dafür float: none;spielt dort die Immobilie eine wichtige Rolle.

Nur wenige Beispiele aus der Praxis, wie floatnützlich dies ist.

Das erste Beispiel, das wir bereits gesehen haben, ist das Erstellen eines oder mehrerer Spaltenlayouts.
Verwenden Sie imgFloated Inside p, damit unsere Inhalte herumfließen können.

Demo (ohne zu schwebenimg)

Demo 2 (imgschwebte zumleft)

Verwenden floatzum Erstellen eines horizontalen Menüs - Demo

Schweben Sie auch das zweite Element oder verwenden Sie "margin"

Last but not least möchte ich diesen speziellen Fall erklären, in dem Sie floatnur ein einzelnes Element zum, leftaber nicht floatdas andere, also was passiert?

Angenommen, wenn wir float: right;von unserem entfernen .floated_right class, divwird das von extrem gerendert, leftda es nicht schwebt.

Demo

Also in diesem Fall können Sie entweder floatdas leftauch

ODER

Sie können verwenden, margin-leftwas der Größe der linken schwebenden Spalte entspricht, dh 200pxbreit .

Mr. Alien
quelle

3

Die Tatsache, dass Floats nicht zur Höhe eines übergeordneten Elements auf Blockebene beitragen , wird hier in der Spezifikation explizit angegeben: w3.org/TR/CSS21/visudet.html#normal-block Der Grund, warum das Hinzufügen eines Clearfixes funktioniert, liegt darin, dass 1) Der Clearfix befindet sich (normalerweise) im normalen Ablauf. 2) Beim Löschen von Floats muss der Clearfix ganz unten auf den Floats platziert werden. 3) Der Container muss gedehnt werden, um diesen Clearfix aufzunehmen.

BoltClock

@BoltClock Es ist besser, wenn Sie die Titelbearbeitung rückgängig machen, da dies das SEO für die Benutzer, die feststellen, wie Float funktioniert, stark beeinträchtigt. Sie können diese Begriffe auf Google schreiben und überprüfen. Andernfalls ist diese kanonische Antwort für andere Personen nicht von Nutzen nicht in der Lage zu finden, wonach sie suchen.

Mr. Alien

"Wie funktioniert CSS Float?" ist ein extrem weit gefasster Titel, und es führt die Leute auch in die Irre, abzustimmen , um nur eine Float-Frage als Betrüger dieser Frage zu schließen. Die Frage hier behandelt nur einen Aspekt: Container, die Floats einwickeln (oder nicht einwickeln).

BoltClock

@ BoltClock Wie auch immer, die Technik bleibt die gleiche wie in erklärt clear: both;, aber es ist in Ordnung, wenn Sie der Meinung sind, dass die Bearbeitung gerechtfertigt ist, also lassen Sie uns so bleiben

Mr. Alien

1

brillante Antwort. "Wenn Sie ein Element nach links oder rechts verschieben, wird die Breite des Elements auf den Inhalt beschränkt, den es enthält, es sei denn, die Breite ist explizit definiert." - Ich habe dasselbe beobachtet und nur danach gesucht, dass dies bestätigt wird. Vielen Dank

Deen John

38

Sie müssen overflow:autoIhrem übergeordneten Div hinzufügen , damit es das innere schwebende Div umfasst:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddle Beispiel

j08691
quelle

6

Dies ist keine Lösung. Sie verbergen den Inhalt, der die Grenzen von außen überschreitet.

Alejandro Ruiz Arias

@AlejandroRuizArias - Wie genau wird etwas versteckt?

j08691

3

In diesem Beispiel nichts, aber wenn Sie genügend Inhalt in das innere Div einführen, ja.

Alejandro Ruiz Arias

Dies macht nicht das, wonach das OP gesucht hat: Forked jsfiddle.net/h0ceb5ra

TecBrat

1

Genial. Die Lösung mit einem Attribut, nach der ich gesucht habe: Wenn alles andere so einfach wäre, wären keine Schrumpfungen erforderlich.

YK

10

Sie stoßen auf den Float-Fehler (obwohl ich nicht sicher bin, ob es sich technisch gesehen um einen Fehler handelt, da so viele Browser dieses Verhalten aufweisen). Folgendes passiert:

Unter normalen Umständen setzt ein Blockebenenelement wie ein div unter der Annahme, dass keine explizite Höhe festgelegt wurde, seine Höhe basierend auf seinem Inhalt fest. Der untere Rand des übergeordneten Divs erstreckt sich über das letzte Element hinaus. Leider hindert das Schweben eines Elements das übergeordnete Element daran, das schwebende Element bei der Bestimmung seiner Höhe zu berücksichtigen. Dies bedeutet, dass wenn Ihr letztes Element schwebt, das übergeordnete Element nicht wie ein normales Element "gedehnt" wird.

Clearing

Es gibt zwei Möglichkeiten, dies zu beheben. Das erste ist das Hinzufügen eines "Clearing" -Elements; Das heißt, ein weiteres Element unterhalb des schwebenden Elements, das den Elternteil zum Dehnen zwingt. Fügen Sie also als letztes Kind das folgende HTML hinzu:

<div style="clear:both"></div>

Es sollte nicht sichtbar sein, und indem Sie clear: beides verwenden, stellen Sie sicher, dass es nicht neben dem schwebenden Element sitzt, sondern danach.

Überlauf:

Die zweite Methode, die von den meisten Leuten bevorzugt wird (glaube ich), besteht darin, das CSS des übergeordneten Elements so zu ändern, dass der Überlauf alles andere als "sichtbar" ist. Wenn Sie also den Überlauf auf "versteckt" setzen, wird der Elternteil gezwungen, sich über den Boden des schwebenden Kindes hinaus zu strecken. Dies gilt natürlich nur, wenn Sie keine Höhe für das übergeordnete Element festgelegt haben.

Wie ich bereits sagte, wird die zweite Methode bevorzugt, da Sie nicht semantisch bedeutungslose Elemente zu Ihrem Markup hinzufügen müssen. Manchmal muss das overflowjedoch sichtbar sein. In diesem Fall ist das Hinzufügen eines Clearing-Elements mehr als akzeptabel .

Maloric
quelle

3

Es ist wegen des Schwebens der Div. Fügen Sie overflow: hiddendas äußere Element hinzu.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

Starx
quelle

3

Sie verwirren, wie Browser die Elemente rendern, wenn schwebende Elemente vorhanden sind. Wenn ein Blockelement schwebt (in Ihrem Fall Ihr inneres Div), werden es von anderen Blockelementen ignoriert, da der Browser schwebende Elemente aus dem normalen Fluss der Webseite entfernt. Dann wird, da das schwebende Div aus dem normalen Fluss entfernt wurde, das äußere Div ausgefüllt, als ob das innere Div nicht da wäre. Inline-Elemente (Bilder, Links, Text, schwarze Anführungszeichen) berücksichtigen jedoch die Grenzen des schwebenden Elements. Wenn Sie Text in das äußere Div einfügen, wird der Text um das innere Div herum platziert.

Mit anderen Worten, Blockelemente (Überschriften, Absätze, Divs usw.) ignorieren schwebende Elemente und füllen sie aus, und Inline-Elemente (Bilder, Links, Text usw.) berücksichtigen die Grenzen schwebender Elemente.

Ein Geigenbeispiel hier

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

Alejandro Ruiz Arien
quelle

3

Markieren Sie den Text nicht und teilen Sie Geigenlinks, Postleitzahlen in Ihrer Antwort vom nächsten Mal, denn wenn der Geigenlink tot ist, erhalten zukünftige Benutzer hier keine Hilfe und Ihre Antwort hat keine Bedeutung

Mr. Alien

2

Probier diese

.parent_div{
    display: flex;
}

Yusufbek
quelle

1

Sie können die Überlaufeigenschaft für das Container-Div verwenden, wenn Sie kein Div über dem Container anzeigen können, z.

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

Hier ist das folgende CSS:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------ODER-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

Hier ist das folgende CSS:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

Nishant Rana
quelle

Warum erhöht sich die Höhe eines Containerelements nicht, wenn es schwebende Elemente enthält?

Antworten:

Wie funktioniert CSS Float?

Was ist float genau und was macht es?

Schweben Sie auch das zweite Element oder verwenden Sie "margin"