Detaillierte Erläuterung der Rolle von overflow:hidden (Überlauf verbergen, Floats löschen, Randkollaps beheben)

1. Überlauf: versteckt Überlauf versteckt

Wenn für ein Element „overflow:hidden“ festgelegt ist, wird der überschüssige Teil ausgeblendet und nimmt keinen Platz ein, wenn der Inhalt des Elements die angegebenen Breiten- und Höhenattribute überschreitet.

/*CSS-Stil*/
<style type="text/css">
    div{ Breite: 150px; Höhe: 60px; Hintergrund: himmelblau;
	 Überlauf: versteckt; /*Überlauf versteckt*/
       }
</Stil>
 
/*html*/
<div Stil="">
    Das Wetter ist heute sehr schön! <br>Das Wetter ist heute sehr schön! <br>
    Das Wetter ist heute sehr schön! <br>Das Wetter ist heute sehr schön! <br>
</div>

Die Wirkung ist wie folgt:

Im Allgemeinen wird auf einer Seite nach einem Überlauf eine Ellipse angezeigt. Wenn beispielsweise eine Textzeile eine feste Breite überschreitet, wird der überschüssige Inhalt ausgeblendet und eine Ellipse angezeigt.

/*Nur für einzeiligen Text*/
div{ 
    Breite: 150px;
    Hintergrund: himmelblau;
    Überlauf: versteckt; /*Überlauf versteckt*/
    white-space: nowrap; /*Gibt an, dass der Text nicht umbrochen wird*/
    text-overflow: ellipsis; /*Wenn der Text innerhalb des Objekts überläuft, wird ein Auslassungszeichen (...) angezeigt*/
}

Die Wirkung ist wie folgt:

2. overflow:hidden löscht schwebende

Wenn die Höhe des übergeordneten Elements nicht festgelegt ist, passt sich die Höhe im Allgemeinen mit zunehmendem Inhalt an. Wenn alle untergeordneten Elemente innerhalb des übergeordneten Elements auf Float eingestellt sind, werden die untergeordneten Elemente vom Standardfluss getrennt und nehmen keinen Platz ein. Das übergeordnete Element kann die Höhe der untergeordneten Elemente nicht erkennen und die Höhe des übergeordneten Elements beträgt 0. Die Frage ist also folgende:

/*CSS-Stil*/
<style type="text/css">
    .box{ Hintergrund:himmelblau; }
    .kid{ Breite: 100px; Höhe: 100px; Float: links;}
    .kid1{ Hintergrund: gelb; }
    .kid2{ Hintergrund: orange; }
    .wrap{ Breite: 300px; Höhe: 150px; Hintergrund: blau; Farbe: weiß; }
</Stil>
 
/*html*/
<Text>
    <div Klasse="Box">
        <div class="kid kid1">Untergeordnetes Element 1</div>
	<div class="kid kid2">Untergeordnetes Element 2</div>
    </div>
    <div class="wrap">Andere Teile</div>
</body> 

Da das übergeordnete Element, wie oben gezeigt, keine Höhe hat, werden die darunter liegenden Elemente nach oben gedrückt, wodurch die Seite zusammenbricht. Daher müssen Sie dem übergeordneten Container ein overflow:hidden-Attribut hinzufügen, damit sich die Höhe des übergeordneten Containers an die Höhe des untergeordneten Containers und seines Inhalts anpasst. wie folgt:

Da overflow:hidden; diesen Effekt in niedrigeren IE-Versionen nicht erzielen kann, müssen Sie zoom:1; hinzufügen.

Um die Kompatibilität zu verbessern, fügen Sie am besten zoom:1; hinzu, wenn Sie zum Löschen des Floats overflow:hidden verwenden müssen.

/*CSS-Stil*/
<style type="text/css">
    .box{ Hintergrund:himmelblau; 
	  Überlauf: versteckt; /*Floating löschen*/
	  Zoom: 1;
        }
    .kid{ Breite: 100px; Höhe: 100px; Float: links;}
    .kid1{ Hintergrund: gelb; }
    .kid2{ Hintergrund: orange; }
    .wrap{ Breite: 300px; Höhe: 150px; Hintergrund: blau; Farbe: weiß; }
</Stil>
 
/*html*/
<Text>
    <div Klasse="Box">
        <div class="kid kid1">Untergeordnetes Element 1</div>
	<div class="kid kid2">Untergeordnetes Element 2</div>
    </div>
    <div class="wrap">Andere Teile</div>
</body> 

3. overflow:hidden behebt den Randkollaps

Innerhalb des übergeordneten Elements befinden sich untergeordnete Elemente. Wenn Sie dem untergeordneten Element den Stil margin-top hinzufügen, folgt das übergeordnete Element ebenfalls, wodurch der äußere Rand wie folgt zusammenfällt:

/*CSS-Stil*/
<style type="text/css">
    .box{ Hintergrund:himmelblau;}
    .kid{ Breite: 100px; Höhe: 100px; Hintergrund: gelb; Rand oben: 20px}
</Stil>
 
/*html*/
<Text>
    <div Klasse="Box">
	<div class="kid">Untergeordnetes Element 1</div>
    </div>
</body> 

Daher kann das Hinzufügen von overflow:hidden zum übergeordneten Element dieses Problem lösen.

/*CSS-Stil*/
<style type="text/css">
    .box{ Hintergrund:himmelblau;
          Überlauf: versteckt; /*Randkollaps lösen*/   
        }
    .kid{ Breite: 100px; Höhe: 100px; Hintergrund: gelb; Rand oben: 20px}
</Stil>
 
/*html*/
<Text>
    <div Klasse="Box">
	<div class="kid">Untergeordnetes Element 1</div>
    </div>
</body> 

Damit ist dieser Artikel mit der ausführlichen Erläuterung der Rolle von overflow:hidden (Überlauf verbergen, Floats löschen, Randkollaps beheben) abgeschlossen. Weitere Informationen zur Rolle von overflow:hidden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!