Lösung für das Problem des durch Float verursachten Zusammenbruchs des übergeordneten Elements

Die Lösung für den Fall, dass Float-Floating dazu führt, dass das übergeordnete Element zusammenbricht, ist: Legen Sie eine Höhe für das übergeordnete Element fest, legen Sie ein leeres Div nach dem letzten untergeordneten Element fest und verwenden Sie „clear“, um den Float zu löschen. Legen Sie „overflow: versteckt“ für das übergeordnete Element fest. und hinzufügen Die After-Pseudoklasse

verwendet beim Layouten von Webseiten häufig das Float-Attribut. Wenn das untergeordnete Element unter dem übergeordneten Element jedoch auf Float eingestellt ist, wird das übergeordnete Element reduziert. Als nächstes werden wir im Artikel detailliert vorstellen, wie das Problem des Zusammenbruchs des übergeordneten Elements aufgrund von Floating gelöst werden kann. Es hat einen bestimmten Referenzwert und wir hoffen, dass es für alle hilfreich ist

[Empfohlener Kurs: CSS-Tutorial]

Nach dem Festlegen der Hintergrundfarbe für das übergeordnete Element eines Elements: Nachdem Sie Float für das untergeordnete Element festgelegt haben, werden Sie feststellen, dass die Hintergrundfarbe des übergeordneten Elements verschwindet. Wenn das übergeordnete Element einen Rand hat, werden Sie feststellen, dass das schwebende Element den Rand nicht öffnen kann.

Beispiel: Für li ist kein Float gesetzt

 <ul style="background: pink;border: 1px solid #ccc">
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  </ul>

Rendering:

Nach dem Festlegen von Float

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  </ul>

Rendering

Wie aus dem Bild oben ersichtlich ist, wenn das untergeordnete Element auf Float eingestellt ist, Das übergeordnete Element Der Inhalt des Elements wird nicht gestreckt. Das heißt, nachdem das Element auf Float gesetzt wurde, liegt es nicht mehr im Zuständigkeitsbereich des gesamten Dokumentflusses. Dann ist seine Höhe, die zuvor im übergeordneten Element vorhanden war, zu diesem Zeitpunkt nicht mehr vorhanden Das Element enthält standardmäßig keinen Inhalt (Voraussetzung. Dies bedeutet, dass für das übergeordnete Element keine feste Höhe festgelegt ist. Wenn das übergeordnete Element selbst eine feste Höhe hat, tritt diese Situation nicht auf) und es kommt zu einer Reduzierung

Lösung für den Zusammenbruch des übergeordneten Elements:

(1) Fügen Sie dem übergeordneten Element eine Höhe hinzu

Die Höhe kann bei dieser Methode nicht bestätigt werden, und Sie benötigen um zu versuchen, es mehrmals festzulegen

<ul style="height:200px;background: pink;border: 1px solid #ccc">

(2) Fügen Sie nach dem letzten untergeordneten Element div ein Leerzeichen hinzu, fügen Sie den Stil klar hinzu und löschen Sie die Floats auf beiden Seiten;

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

(3 ) Das übergeordnete Element setzt overflow: versteckt;

 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">

(4) Das übergeordnete Element fügt die After-Pseudoklasse hinzu; es wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonLösung für das Problem des durch Float verursachten Zusammenbruchs des übergeordneten Elements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!