Detaillierte Analyse des Unterschieds zwischen CSS-Float-Attribut und position:absolute_Basic Tutorial

1. Das Float-Attribut definiert, in welche Richtung das Element schwimmt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements. div ist ein typisches Element auf Blockebene, das allein eine Zeile einnimmt.

Sehen wir uns zunächst an, wie die grundlegendsten Elemente auf Blockebene angeordnet sind. HTML-Code, die folgenden Stile basieren darauf.

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                        
CSS-Code:





Code kopieren


Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px; border:2px solid #ccc } .box1{ width:100px; height:50px;Hintergrundfarbe:rot

}

.box2{
width:100px;
height:50px;
background-color:blue
}
.box3{
Breite :100px;
Höhe :50px;
Hintergrundfarbe:grün
}



Ausführungsergebnis:




Da div ein Element auf Blockebene ist, werden die Boxen vertikal angeordnet. Im tatsächlichen Betrieb ist es häufig erforderlich, die Rahmen horizontal anzuordnen. Es gibt zwei Möglichkeiten, dies zu tun. Der erste ist display:inlin-block;

Code kopieren

Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px; border:2px solid #ccc } .box1{ width:100px; height:50px;Hintergrundfarbe:rot;

Anzeige:inline-block

}
.box2{
width:100px;
height:50px;
background-color:blue;
display :inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}



Ausführungsergebnis:




Der wesentliche Grund für die Lücke in der Mitte ist der Leerraum zwischen den Elementen. Wenn Sie also die Größe von fone-size im übergeordneten Element festlegen, kann die Größe des Leerraums angepasst werden.

Code kopieren

Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px; border:2px solid #ccc; font-size:34px;}

Nachdem Sie die Schriftgröße auf 34 Pixel eingestellt haben, wird die Lücke größer.

Ausführungsergebnis:




Wenn Sie die Lücke entfernen möchten, müssen Sie ebenfalls die Schriftgröße ändern:0;

Code kopieren

Der Code lautet wie folgt:

.boxBg{

margin: 0 auto;

width:500px;

height:200px; border:2px solid #ccc; font-size:0}

Ausführungsergebnis:

Auf diese Weise wird das gewünschte Layout erreicht und der Text innerhalb der Box verschwindet. Dies beweist auch, dass die Größe des Textes die Lücke beeinflusst. Setzen Sie es einfach im untergeordneten Element zurück. Natürlich steht das heute nicht im Mittelpunkt. Der gleiche Effekt float:left; kann auch leicht erreicht werden.

Code kopieren Der Code lautet wie folgt:

Ausführungsergebnis:

Nach dem Hinzufügen von Float zu einem

-Element wird das Floating-Element sofort angezeigt, nachdem es den Rand des übergeordneten Elements oder eines anderen Floating-Elements erreicht. Wenn beispielsweise im folgenden Beispiel die Gesamtbreite des schwebenden Elements größer als die des übergeordneten Elements ist, wird die Zeile umbrochen. Beim Umbrechen der Zeile wird das vorherige schwebende Element angetroffen und

danach angezeigt.

Code kopieren Der Code lautet wie folgt:

Ausführungsergebnis:

Was wird das Ergebnis sein, wenn Inline-Block verwendet wird?

Code kopieren Der Code lautet wie folgt:

Ausführungsergebnis:

Zu diesem Zeitpunkt beginnt Feld 3 in einer neuen Zeile, anstatt auf Feld 1 zu folgen (die Lücke zwischen 1 und 2 wird hier nicht besprochen). Dies ist auch eine Beurteilung unter Verwendung von Inline-Block und Float Anders Die Verwendung von Float-Schriftsätzen kann zu anderen Ergebnissen als erwartet führen. Daher ist es hervorragend, Float zu verwenden, wenn Breite und Höhe unverändert bleiben. Wenn es inkonsistent ist, müssen Sie sich das spezifische Layout ansehen und geeignete Attribute verwenden.

Der Code wird unten veröffentlicht, nur der geänderte Teil wird veröffentlicht, der Rest bleibt unverändert und die Struktur bleibt unverändert.

Was wird das Ergebnis sein, wenn der Float: links von Box3 entfernt wird? Nach dem Verständnis belegen schwebende Elemente keinen Platz, d. h. Frame 3 ignoriert Frame 1 und Frame 2 wird direkt neben dem Rand des übergeordneten Elements angezeigt, d. h. Frame 1 deckt Frame 3 ab Ergebnis?

Code kopieren Der Code lautet wie folgt:

.box3{
width:100px ;
height:50px;
background-color:green;
}

Ausführungsergebnis:

Warum erscheint der Text in Feld 3 unten, anstatt von Feld 1 abgedeckt zu werden? Dann schauen Sie sich den Code und das Bild an

Code kopieren Der Code lautet wie folgt:

.box3{
height:50px ;
Hintergrundfarbe:grün;
}

Ausführungsergebnis:

Sehen Sie den Unterschied? Ja. box3 definiert die Breite nicht; die Breite wird nicht definiert, die Standardbreite ist die Breite des übergeordneten Elements, was bedeutet, dass das schwebende Element zu diesem Zeitpunkt das nicht schwebende Element abdeckt , die Breite von 200 Pixel vor Feld 3 wird vom schwebenden Element abgedeckt. Warum wird der Text nicht abgedeckt und der Text wird um 200 Pixel hinter dem schwebenden Element gequetscht?

Schwebende Elemente belegen nicht den Platz des Blocks, daher hat Box drei 100 % der Breite des übergeordneten Containers von 500 Pixeln, aber schwebende Elemente nehmen einen anderen Platz ein, nämlich den Platz der Zeilenbox Platz, den der Text einnimmt.

Dies ist auch der Grund, warum der Text automatisch um das Bild herum umbrochen wird, nachdem es schwebend ist. Schwebende Elemente belegen keinen Platz auf Blockebene, wirken sich jedoch auf Text und Inline-Elemente innerhalb von Elementen auf Blockebene aus.

Wenn Sie in diesem Fall möchten, dass die drei Felder die gleiche Breite haben, müssen Sie nur die Breite der drei Felder ändern: 300px

Code kopieren Der Code lautet wie folgt:

.box3{
width:300px ;
height:50px;
background-color:green;
}

Ausführungsergebnis:

Nachdem wir nun über das grundlegende Floating gesprochen haben, sprechen wir über die Probleme. Obwohl Floating einfach zu verwenden ist, wird es in der Praxis auch viele Probleme verursachen. Zum Beispiel:

Ausführungsergebnis:




Unter normalen Umständen ein sehr häufiges Problem. Der graue Hintergrund sollte so hoch sein wie der Rahmen, aber die Realität ist immer nicht zufriedenstellend :)

Wir alle wissen, dass der Grund für diese Situation im Schweben liegt. Es wird an vielen Stellen gesagt, dass sich schwebende Elemente vom gewöhnlichen Fluss lösen, daher können gewöhnliche Elemente als schwebende Elemente behandelt werden Existieren nicht, daher gibt es hier nichts dergleichen. Der Hintergrund wird geöffnet, aber Schüler, die sorgfältig lesen, werden sich daran erinnern, dass oben erwähnt wurde, dass sich schwebende Elemente nicht auf Blockfelder, sondern auf Zeilenfelder, also Text oder Inline, auswirken Elemente, unabhängig davon, ob es sich um Elemente auf Blockebene oder um Inline-Elemente handelt. Wenn das schwebende Element vom normalen Fluss abweicht, warum wirkt es sich dann auf die Zeilenbox aus? Tatsächlich glaube ich nicht, dass es nötig ist, sich mit diesen konzeptionellen Dingen zu befassen. Nach meinem Verständnis befinden sich schwebende Elemente nicht im selben horizontalen Raum wie Elemente auf Blockebene, sondern im selben Raum wie Text-Inline-Elemente. Daher entspricht der Rand hier der Platzierung über dem Hintergrund und hat daher keine Auswirkungen auf den Hintergrundelemente. Was normalerweise als Löschen von Floats bezeichnet wird, bedeutet nicht, das Float-Attribut des Floating-Elements zu entfernen, sondern die Floating-Elemente um es herum zu löschen, sodass sich keine Floating-Elemente um es herum befinden Wenn Sie in die zweite Zeile wechseln, können Sie „clear:right;“ nicht in Feld 2 verwenden. Sie müssen „clear:left;

“ in Feld 3 verwenden

Code kopieren

Der Code lautet wie folgt:

.box3{ float:left ; width:100px; height:50px;background-color:green;clear:left

}

Ausführungsergebnis:




Ok! Jetzt, da ich das verstanden habe, wollen wir darüber sprechen, wie man den Hintergrund und den Rahmen auf die gleiche Höhe bringt. Der erste Weg: Der direkteste Weg besteht darin, die Hintergrundhöhe direkt auf den Rahmen und den Rahmen einzustellen Natürlich geht es nicht darum, es zu löschen. Schauen wir uns zunächst das Beispiel an:

Code kopieren

Der Code lautet wie folgt:

     


   

       
        框框1
       

       

        框框2
       

        框框3
       

       

   

执行结果：

>所以是跟背景一样,因此背景被撑开了.其实是用清除浮动的原理跟这个是一样的,也是想办法撑开背景；以上去掉clear的宽,高,加上clear属性

复制代码

代码如下:

.clear{    clear:left;    }

执行结果：

这个可能还看不清楚，给clear框里边加几个字试试看

执行结果：

因为clear用了clear:left综上所述，clear左边不能有浮动元素，所以它必须另起一行显示。如此便看到图上的结果,其实还是用一个元素撑开的背景.当然还有其他方法实现，这里主要是讲清楚浮动就好了:)