Warum nicht die Höhe des container-Elements zu erhöhen, wenn es mit gefloateten Elementen?

Die gefloateten Elemente nicht hinzufügen, um die Höhe des container-Elements, und daher, wenn Sie nicht reinigen Sie, Behälterhöhe nicht erhöhen...

Werde ich Ihnen zeigen, optisch:

Mehr Erklärung:

<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>

Können Sie auch hinzufügen overflow: hidden; auf container-Elemente, aber ich schlage vor, Sie verwenden clear: both; statt.

Auch wenn Sie vielleicht gerne selbst-klar, ein element, das Sie verwenden können,

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

---

Wie Funktioniert CSS Float Funktioniert?

Was ist float genau und was tut es?

• Den float Eigenschaft ist missverstanden von den meisten Anfänger. Nun, was genau macht float tun? Zunächst werden die float Eigenschaft wurde eingeführt, um Textfluss um die Bilder die schwebte left oder right. Hier ist eine weitere Erklärung von @Madara Uchicha.

  So, ist es falsch zu verwenden, die float Eigenschaft für die Platzierung von Boxen nebeneinander? Die Antwort ist keine; es ist kein problem, wenn Sie die float Eigenschaft, um Boxen nebeneinander.

• Floating eine inline oder block level-element wird das element verhält sich wie ein inline-block element.

  Demo

• Wenn du float ein element left oder right, die width des Elements beschränkt sich auf die Inhalte, die es hält, es sei denn width explizit definiert wird ...

• Können Sie nicht float ein element center. Dies ist die größte Frage, die ich schon immer gesehen, mit Anfänger, mit float: center; ist keine Gültiger Wert für die float Eigenschaft. float ist in der Regel verwendet, um float/verschieben von Inhalt auf die sehr Links oder das Recht. Es gibt nur vier gültige Werte für float Eigenschaft, die ich.e left, right, none (Standard) und inherit.

• Übergeordneten element kollabiert, wenn es enthält schwebte Kind-Elemente, um dies zu verhindern, verwenden wir clear: both; Eigenschaft, klar, das schwebte Elemente auf beiden Seiten, so dass das kollabieren des parent-Elements. Weitere Informationen entnehmen Sie bitte meiner anderen Antwort hier.

• (Wichtig) Denke, wo wir einen Stapel verschiedener Elemente. Wenn wir float: left; oder float: right; das element bewegt sich über den Stapel ein. Damit die Elemente in den normalen Belegfluss wird, verstecken Sie sich hinter der gefloateten Elemente, weil es auf stack-Ebene über dem normalen Schwamm Elemente. (Bitte nicht in Verbindung bringen z-index da, der ganz anders ist.)

---

Wobei ein Fall als ein Beispiel, um zu erklären, wie CSS-floats arbeiten, vorausgesetzt, wir brauchen eine einfache 2-Spalten-layout mit Kopfzeile, Fußzeile und 2 Spalten, also hier ist, was die Blaupause sieht aus wie...

Im obigen Beispiel, werden wir schweben und nur die roten Felder, Sie können entweder float sowohl für die left oder Sie können float auf left, und eine andere zu right wie gut, hängt vom layout, wenn es 3 Spalten, können Sie float 2 Spalten left wo andere den right so hängt, obwohl in diesem Beispiel haben wir eine vereinfachte 2-Spalten-layout, so wird float eine zu left und die anderen die right.

Markup und styles für die Erstellung, das layout weiter unten erklärt...

<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;
}

Gehen wir Schritt für Schritt mit dem layout und zu sehen, wie float funktioniert..

Zunächst verwenden wir die wichtigsten wrapper-element können Sie nur davon ausgehen, dass es das Ansichtsfenster, dann verwenden wir header und vergeben Sie einen height von 50px also nichts besonderes gibt. Es ist nur eine normale, nicht schwebte block-level-element, das dauern wird, bis 100% horizontalen Raum, es sei denn, es schwebte oder wir weisen Sie inline-block zu.

Den ersten gültigen Wert für float ist left also in unserem Beispiel verwenden wir float: left; für .floated_left, so wollen wir schweben einen block, um die left unserer container-element.

Spalte schwebte auf der linken Seite

Und ja, wenn Sie sehen, das übergeordnete element, das .wrapper ist zusammengebrochen, die Sie sehen mit einem grünen Rahmen nicht erweitern, aber es sollte richtig? Komme in eine Weile, jetzt haben wir eine Spalte Schwamm, um left.

Kommen zur zweiten Spalte, lässt es float diese ein, um die right

Eine weitere Spalte nach rechts gefloatet

Hier haben wir eine 300px Breite Spalte, die wir float zu den right, die sich neben der ersten Spalte, wie es schwebte an die left, und da ist es schwebte an die left es leer angelegt Dachrinne, um die right, und da gab es reichlich Platz auf der right unsere right Schwebekörper saß perfekt neben die left ein.

Immer noch, das übergeordnete element ist eingestürzt, gut, wir korrigieren das jetzt. Es gibt viele Möglichkeiten, um zu verhindern, dass das übergeordnete element immer zusammengebrochen.

• Fügen Sie einen leeren block-level-element, und verwenden Sie clear: both; vor dem übergeordneten element endet, das hält schwebte Elemente, das jetzt ist eine günstige Lösung clear Ihrem schwimmenden Elementen, die der job für Sie tun, aber ich würde empfehlen, diese nicht zu verwenden.

Hinzufügen, <div style="clear: both;"></div> vor der .wrapper div endet, wie

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

Demo

Gut, die fixes sehr gut, keine eingestürzten Elternteil nicht mehr, aber es fügt unnötige markup-Code der DOM, die so etwas vorschlagen, zu verwenden overflow: hidden; auf das Eltern-element holding schwebte child-Elemente, die so funktionieren wie Sie sollen.

Verwenden overflow: hidden; auf .wrapper

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

Demo

Das spart uns ein element jedes mal, wenn wir brauchen, um clear float aber als ich getestet verschiedenen Fällen mit dieser nicht in eine bestimmte, die verwendet box-shadow auf die Kind-Elemente.

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

Also was jetzt? Speichern Sie ein element, keine overflow: hidden; so gehen Sie für eine klare fix-hack, verwenden Sie die unten-Schnipsel in deine CSS, und so wie Sie mit overflow: hidden; für das übergeordnete element, rufen Sie die class unten auf das übergeordnete element selbst klar.

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

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

Demo

Hier, Schatten wie vorgesehen funktioniert, auch, es sich selbst löscht das parent-element, das verhindert, dass zu kollabieren.

Und schließlich, wir verwenden Fußzeile, nachdem wir clear die gefloateten Elemente.

Demo

---

Wann wird float: none; verwendet, egal, wie es ist der Standard, so dass jede Nutzung zu erklären float: none;?

Gut, es hängt, wenn Sie sich für ein responsive design verwenden Sie diesen Wert eine Menge Zeit, wenn Sie wollen, dass Ihr schwebte Elemente zu Rendern, die man unter anderen bei einer bestimmten Auflösung. Für die, die float: none; Eigenschaft spielt eine wichtige Rolle.

---

Paar Reale Beispiele, wie float nützlich ist.

• Das erste Beispiel, das wir bereits sahen, ist die Erstellung einer oder mehr als einer Spalte layouts.
• Mit img schwebte im inneren p, die es ermöglichen, unsere Inhalte, die Strömung um.

Demo (Ohne floating img)

Demo 2 (img schwebte an die left)

• Mit float für die Erstellung von horizontalen Menü - Demo

---

Float-das zweite element, oder verwenden Sie `margin`

Letzte, aber nicht zuletzt, möchte ich erklären, in diesem besonderen Fall, in dem Sie float nur einziges element, das left aber nicht float den anderen, was passiert also?

Nehme an, wenn wir entfernen float: right; von unserer .floated_right class, die div dargestellt wird, von extremen left da er nicht schwebte.

Demo

So, in diesem Fall, Sie können entweder float die left als auch

ODER

Können Sie verwenden Sie margin-left, die gleich der Größe des Links gefloateten Spalte ich.e 200px Breite.

Auftritt, das float-bug (obwohl ich nicht sicher bin, ob es technisch ein Fehler auf, wie viele Browser zeigen dieses Verhalten). Hier ist, was passiert:

Unter normalen Umständen, vorausgesetzt, dass keine explizite Höhe festgelegt worden ist, ein block-level-element wie z.B. ein div-Element wird festgelegt, dessen Höhe auf der Grundlage Ihres Inhalts. Den unteren Rand des übergeordneten div erweitern wird darüber hinaus das Letzte element. Leider floating element Stoppt den Eltern, von den gefloateten element zu berücksichtigen bei der Festlegung Ihrer Höhe. Dies bedeutet, dass, wenn Ihre Letzte element ist, Schwamm, wird es nicht "Strecken" der Eltern in der gleichen Weise ein normales element.

Clearing

Gibt es zwei gängige Möglichkeiten, um dieses Problem zu beheben. Das erste ist das hinzufügen einer "clearing" - element; das heißt, ein weiteres element, das unter dem schwebte eine, zwingt die Eltern, sich zu Strecken. So fügen Sie den folgenden html-Code als das Letzte Kind:

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

Sollte es nicht sichtbar sein, und mit clear:both, stellen Sie sicher, dass Sie sitzen nicht neben dem gefloateten element, aber nachdem es.

Overflow:

Die zweite Methode, das ist bevorzugt durch die meisten Leute (denke ich) ist die änderung der CSS des parent-Elements, so dass der überlauf ist alles andere als "sichtbar". Damit das setzen der überlauf auf "hidden" zu zwingen, die Eltern zu Strecken jenseits der Unterseite der schwebte Kind. Dies ist nur wahr, wenn man noch nicht Höhe festlegen, auf die Eltern, natürlich.

Wie gesagt, die zweite Methode ist bevorzugt, da es nicht erfordern, dass Sie gehen und fügen Sie semantisch bedeutungslose Elemente, um Ihre markup, aber es gibt Zeiten, wenn Sie Sie brauchen, die overflow sichtbar sein, in welchem Fall das hinzufügen eines clearing-element ist mehr als akzeptabel.

Verunsichern Sie, wie Browser rendert die Elemente, wenn es floating elements. Wenn ein block-element ist floating (Ihre inneren div in deinem Fall), anderen block-Elemente ignorieren, weil browser entfernt schwimmende Elemente aus dem normalen Textfluss der Webseite. Dann, weil die gefloateten div entfernt wurde, aus dem normalen Fluss, der außerhalb div gefüllt wird, wie die inneren div-gibt es nicht. Aber inline-Elemente (Bilder, links, text, blackquotes) respektieren die Grenzen der "floating Elements". Wenn Sie einführen, text, draußen in der div, der text wird Platz arround de innere div.

In anderen Worten, block-Elemente (überschriften, Absätze, divs, etc) ignorieren floating elements und ausfüllen, und inline-Elemente (Bilder, links, text, etc.) respektieren die Grenzen der schwimmenden Elemente.

Ein fiddle-Beispiel 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>

Versuchen, diese

.parent_div{
    display: flex;
}