Eine kurze Diskussion über die Eigenschaften von CSS-Float

In diesem Artikel werden die Eigenschaften von CSS-Floats vorgestellt. Ich möchte ihn mit Ihnen teilen und mir selbst eine Notiz hinterlassen.

Floats haben die folgenden Eigenschaften:

1. Text kann nicht abgedeckt werden
2. Wenn auf das schwebende Element kein Blockelement folgt, wird das folgende Element daneben platziert (es sei denn, die Breite des Elements ist festgelegt und es wird umbrochen, wenn es nicht auf den Bildschirm passt).
3. Wenn das vorherige Element des schwebenden Elements nicht schwebt, schwebt das schwebende Element nur in der aktuellen Zeile. Wenn das schwebende Element auf das schwebende Element trifft, werden sie in einer Zeile sortiert, sofern kein Platz mehr vorhanden ist.
4. Wenn der Elementpositionierungswert auf absolut oder fest eingestellt ist, wird das Schweben ignoriert.
5. float bewirkt, dass die Höhe des übergeordneten Elements reduziert wird
6. Das schwebende Element wird durch den oberen Rand des nächsten Elements beeinflusst.

Text kann nicht abgedeckt werden

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       div{
           Breite: 100px;
           Höhe: 100px;
       }
        .item1{
            schweben: links;
            Hintergrundfarbe: rosa;
        }
        .item2{
            Hintergrundfarbe: #58d3e2;
        }
    </Stil>
<div Klasse="Artikel1">Artikel1</div>
<div Klasse="Artikel2">Artikel2</div> 

Wie Sie sehen, sind mit Ausnahme des Textes alle anderen Inhalte des Div von Element2 unsichtbar, da es unter Element1 ausgeführt wird. Warum wird der Text nicht vom schwebenden Element abgedeckt? Denn die Essenz des Schwebens besteht darin, einen Textumbruch zu erreichen.

Aus dem oben Gesagten lässt sich auch der Schluss ziehen, dass die Blockebenenelemente nach den schwebenden Elementen die Position der schwebenden Elemente einnehmen und die schwebenden Elemente immer über den Standardflusselementen liegen.

Wenn auf das schwebende Element kein Blockelement folgt, wird das folgende Element daneben platziert (es sei denn, die Breite des Elements ist festgelegt, und es wird nicht umbrochen, wenn es nicht auf den Bildschirm passt).

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       div{
           Breite: 100px;
           Höhe: 100px;
       }
        .item1{
            schweben: links;
            Hintergrundfarbe: rosa;
        }
        .item2{
            Anzeige: Inline-Block;
            Hintergrundfarbe: #58d3e2;
        }
    </Stil>
<div Klasse="Artikel1">Artikel1</div>
<div Klasse="Artikel2">Artikel2</div> 

Wenn das vorherige Element des schwebenden Elements nicht schwebt, schwebt das schwebende Element nur in der aktuellen Zeile. Wenn das schwebende Element auf das schwebende Element trifft, werden sie in einer Zeile sortiert, sofern kein Platz mehr vorhanden ist.

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       div{
           Breite: 100px;
           Höhe: 100px;
       }
        .item1{
            Hintergrundfarbe: rosa;
        }
        .item2{
            schweben: links;
            Hintergrundfarbe: #58d3e2;
        }
    </Stil>
<div Klasse="Artikel1">Artikel1</div>
<div Klasse="Artikel2">Artikel2</div>
<div Klasse="Artikel3">Artikel3</div> 

 <Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       div{
           Breite: 400px;
           Höhe: 100px;
           schweben: links;
       }
        .item1{
            Hintergrundfarbe: rosa;
        }
        .item2{
            Hintergrundfarbe: #58d3e2;
        }
        .item3{
            Hintergrundfarbe: #61dafb;
        }
        .item4{
            Hintergrundfarbe: #e9203d;
        }
    </Stil>
<div Klasse="Artikel1">Artikel1</div>
<div Klasse="Artikel2">Artikel2</div>
<div Klasse="Artikel3">Artikel3</div>
<div Klasse="Artikel4">Artikel4</div> 

Sie können die Breite als Prozentsatz festlegen, um eine Anpassung zu erreichen

 div{
           Breite: 25 %;
           Höhe: 100px;
           schweben: links;
       } 

Wenn der Elementpositionierungswert auf absolut oder fest eingestellt ist, wird das Schweben ignoriert.

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       div{
           Position: absolut;
           schweben: links;
           Breite: 100px;
           Höhe: 100px;
           Rand: 1px durchgehend rot;
       }
    </Stil>
 <div class="item1">Schweben trifft Positionierung</div> 

Nachdem das Inline-Element Floating verwendet, generiert es eine Blockbox, sodass es Attribute wie Breite, Höhe, Rand, Polsterung usw. verwenden kann.

 <Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
       [Klasse^='Artikel']{

           schweben: links;
           Breite: 100px;
           Höhe: 100px;
           Zeilenhöhe: 100px;
           Textausrichtung: zentriert;
       }
        .item1{
            schweben: links;
            Hintergrundfarbe: rosa;
        }
        .item2{
            Anzeige: Inline-Block;
            Hintergrundfarbe: #58d3e2;
        }

    </Stil>
<span class="item1">item1</span>
<div Klasse="Artikel2">Artikel2</div> 

float bewirkt, dass die Höhe des übergeordneten Elements reduziert wird

Im Webdesign kommt es sehr häufig vor, dass dem Inhalt ein Div als umschließender Container zugewiesen wird. Dieser umschließende Container legt die Höhe nicht fest, lässt aber den darin enthaltenen Inhalt die Höhe des umschließenden Containers erweitern. Wenn Sie für das untergeordnete Element kein Floating festlegen, gibt es kein Problem. Sobald Sie jedoch Floating für das untergeordnete Element festlegen, kann sich das übergeordnete Element nicht an die Höhe des Floating-Elements anpassen, und die Höhe des übergeordneten Elements beträgt 0, sodass die Hintergrundfarbe und andere Dinge nicht angezeigt werden. Die Gründe sind:

Da die Div-Höhe nicht im Voraus festgelegt ist, wird die Div-Höhe durch die Höhe der darin enthaltenen untergeordneten Elemente bestimmt. Das Schweben erfolgt außerhalb des Dokumentflusses, daher wird die Höhe der untergeordneten Elemente nicht berechnet. Zu diesem Zeitpunkt entspricht die Höhe des untergeordneten Elements im Div 0, sodass die Höhe des übergeordneten Elements zusammenbricht.

   <Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }

        .Artikel{
            schweben: links;
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rosa;
        }

    </Stil>
   <div Klasse="Box">
       <div Klasse="Artikel"></div>
   </div> 

Lösung:

1. Fügen Sie dem übergeordneten Element "overflow:hidden" hinzu

Natürlich kann es auch „overflow:auto“ sein. Aus Kompatibilitätsgründen mit dem Internet Explorer empfiehlt es sich jedoch, overflow:hidden zu verwenden.

.Kasten{
  Überlauf: versteckt;
}

Warum also löst „overflow:hidden“ dieses Problem?

Dies liegt daran, dass „overflow:hidden“ den BFC auslöst, der wiederum bestimmt, wie „height:auto“ berechnet wird.

Das heißt, bei der Berechnung der Höhe von BFC werden auch schwebende Elemente in die Berechnung einbezogen, sodass sich das übergeordnete Element zu diesem Zeitpunkt an die Höhe der schwebenden Elemente anpasst.

Daher können Sie auch „display:inline-block“, „position:absolute“ und „float:left“ festlegen, um das Problem des Höhenabfalls des übergeordneten Elements zu lösen. Denn solange Sie einen BFC erstellen können, können Sie den Effekt des Umschließens schwebender untergeordneter Elemente erzielen. Daher heißt es im Internet, dass „BFC schwebende Elemente umschließen kann“.

2. Fügen Sie Pseudoelemente hinter oder vor dem Inhalt des übergeordneten Elements hinzu + löschen Sie schwebende

Sie können dem Inhalt des übergeordneten Elements ein Pseudoelement hinzufügen, indem Sie ::before oder ::after verwenden, und dann den Inhalt leeren, damit er die Position nicht einnimmt. Fügen Sie zum Schluss „clear:both“ zum Pseudoelement hinzu, um den Float zu löschen.

 <Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
        .box::nach{
            Inhalt: '';
            Anzeige: Block;
            klar: beides;
        }
        .Artikel{
            schweben: links;
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Dunkelrosa;
        }

    </Stil>
<div Klasse="Box">
    <div Klasse="Artikel"></div>
</div>

Warum ist das möglich?

Um den Grund zu verstehen, müssen wir zwei Punkte kennen: Zum einen die eigentliche Funktion von Pseudoelementen, zum anderen kann das Löschen von Floats in CSS nur das Element selbst beeinflussen, nicht aber andere Elemente, und das Löschen von Floats kann als Aufbrechen der horizontalen Anordnung verstanden werden.

Zunächst einmal müssen Sie die Rolle von ::after und ::before verstehen. Sie fügen kein Pseudoelement nach oder vor einem Element ein, sondern ein Pseudoelement nach oder vor dem Elementinhalt (innerhalb des Elements). Früher dachte ich immer, dass der von den Pseudoelementen :before und :after eingefügte Inhalt vor oder nach dem Zielelement eingefügt würde. Tatsächlich wird der eingefügte Inhalt das untergeordnete Element des zugehörigen Zielelements sein, aber er wird „vor“ oder „nach“ jedem Inhalt dieses Elements platziert. Nehmen wir ein Beispiel. Sie können sehen, dass die Höhe von .box 300px beträgt, was bedeutet, dass die beiden Pseudoelemente in den .box-Inhalt eingefügt wurden.

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
        .box::vor{
            Inhalt: „vorher“;
            Höhe: 100px;
            Breite: 100px;
            Anzeige: Block;
            klar: beides;
            Hintergrundfarbe: #61dafb;
        }
        .box::nach{
            Inhalt: „nach“;
            Breite: 100px;
            Höhe: 100px;
            Anzeige: Block;
            klar: beides;
            Hintergrundfarbe: Aquamarin;
        }
        .Artikel{
            schweben: links;
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Dunkelrosa;
        }

    </Stil>
<div Klasse="Box">
    <div Klasse="Artikel"></div>
</div> 

Zusammenfassend verwenden wir häufig die folgenden Methoden, um schwebende

.box::nach{
  Inhalt:'';
  Anzeige:Block;
  klar: beides;
}
oder .box::before{
  Inhalt:'';
  Anzeige:Block;
  klar: beides;
}
Oder .box::before,.box::after{
  Inhalt:'';
  Anzeige:Block;
  klar: beides;
}
//::before und ::after müssen mit dem Inhaltsattribut verwendet werden. Inhalt wird verwendet, um den eingefügten Inhalt zu definieren. Inhalt muss einen Wert haben oder zumindest leer sein. Standardmäßig ist die Anzeige von Pseudoelementen der Standardwert „inline“, der durch Festlegen von „display:block“ geändert werden kann.

Fügt vor und nach dem Inhalt des übergeordneten Elements ein Pseudoelement ein. Wenn der Inhalt leer gelassen wird, stellt man sicher, dass er keine Position einnimmt (die Höhe ist 0). „clear:both“ kann die linken und rechten Floats des übergeordneten Elements löschen, wodurch .box::before und .box::after beim Auftreffen auf Floating-Elemente umgebrochen werden und dadurch die Höhe erweitert wird. Das übergeordnete Element passt sich dieser Höhe an, sodass die Höhe nicht zusammenbricht.

Andere Methoden zum Lösen des Höhenkollapses basieren auf diesen beiden Ideen: Eine besteht darin, BFC auszulösen, die andere darin, Elemente hinzuzufügen + Floats zu löschen (löschen).

Das schwebende Element wird durch den oberen Rand des nächsten Elements beeinflusst.

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
        div{
            Breite: 100px;
            Höhe: 100px;
        }
        div:n-ter-Typ(1){
            schweben: links;
            Hintergrundfarbe: #61dafb;
        }
        div:n-ter-Typ(2){
            Rand oben: 100px;
            Hintergrundfarbe: #58d3e2;
        }

    </Stil>
<div >div1</div>
<div>div2</div>

Sie können sehen, dass das erste Div auch nach unten folgt. Die Lösung besteht darin, für das nächste Element „clear“ festzulegen. Zu diesem Zeitpunkt ist der obere Rand des nächsten Elements ungültig.

<Stil>
        Körper,div{
            Rand: 0;
            Polsterung: 0;
        }
        div{
            Breite: 100px;
            Höhe: 100px;
        }
        div:n-ter-Typ(1){
            schweben: links;
            Hintergrundfarbe: #61dafb;
        }
        div:n-ter-Typ(2){
            klar: beides;
            Rand oben: 100px;
            Hintergrundfarbe: #58d3e2;
        }

    </Stil>
<div >div1</div>
<div>div2</div> 

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.