Floaten und Floaten löschen in der Übersichtsseite

1. Float: Der Hauptzweck besteht darin, den Effekt des Textumbruchs um Bilder zu erzielen.

Darüber hinaus ist es die einfachste Möglichkeit geworden, ein mehrspaltiges Layout zu erstellen.

 <img src="" />
<p>Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt</p>

【1】Textumbruchbild

  P {Rand: 0; Rahmen: durchgezogen 1px;}
  img {float: left;}

【2】Erstellen Sie ein mehrspaltiges Layout

  P {Rand: 0; Rahmen: durchgezogen 1px; Breite: 200px; Float: links;}
  img {float: left;}

2. Das schwebende Element befindet sich außerhalb des Dokumentflusses und das übergeordnete Element kann es nicht sehen, da es es nicht umgibt. Daher hat das untergeordnete Element zwar eine Höhe, das übergeordnete Element wird jedoch nicht gestützt, was wir nicht möchten.

Nachfolgend finden Sie drei Lösungsansätze . Bitte berücksichtigen Sie die Situation und wenden Sie sie entsprechend an:

 <Abschnitt>
<img src=" />
<p>Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz. Dies ist ein Absatz.</p>
</Abschnitt>
<footer>Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden. Das ist der Boden.</footer>

Abschnitt, Fußzeile {border: solid 1px;}
img {float: left;}

【1】 Überlauf hinzufügen: Im übergeordneten Element ausblenden; das übergeordnete Element zwingen, das schwebende Element zu umgeben

Der eigentliche Zweck dieser Deklaration besteht darin, zu verhindern, dass das übergeordnete Element durch übergroßen Inhalt gestreckt wird. Nach der Anwendung von overflow: hidden behält das übergeordnete Element weiterhin seine festgelegte Breite bei und übergroßer untergeordneter Inhalt wird vom Container abgeschnitten.

Darüber hinaus hat overflow: hidden einen weiteren Effekt: Es kann das übergeordnete Element zuverlässig dazu zwingen, seine schwebenden untergeordneten Elemente einzuschließen.

Es kann nicht auf dem Element der obersten Ebene verwendet werden, das das Dropdown-Menü verwendet, da sonst das Dropdown-Menü als untergeordnetes Element nicht angezeigt wird.

【2】 Lassen Sie das übergeordnete Element gleichzeitig schweben, wobei die Breite 100 % der Browserbreite entspricht, und löschen Sie den Float für die Fußzeile, damit die Fußzeile nicht neben dem Abschnitt zusammengedrückt wird.

  Abschnitt {border: solid 1px; float: left; width:100%}
  Fußzeile {border: solid 1px; clear: left}
  img {float: left;}

Kann nicht auf Elemente angewendet werden, die automatisch anhand der Ränder zentriert werden. Sonst ist es nicht mehr zentriert.

【3】Nicht schwebende Clearing-Elemente (Pseudoelemente) hinzufügen

 .clearfix:nach {
  Inhalt: "";
  Anzeige: Block;
  Höhe: 0
  Sichtbarkeit: versteckt;
  klar: beides
}

3. So löschen Sie, wenn kein übergeordnetes Element vorhanden ist (img p als Gruppe, kein übergeordnetes Element)

 <Abschnitt>
  <img src=" />
  <p class="clearfix">Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt</p>
  <img src=" />
  <p class="clearfix">Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt</p>
  <img src=" />
  <p class="clearfix">Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt Textinhalt Absatzinhalt</p>
</Abschnitt>

.clearfix:nach {
  Inhalt: "";
  Anzeige: Block;
  Höhe: 0
   Sichtbarkeit: versteckt;
  klar: beides
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Gleichzeitig hoffe ich auch, dass Sie 123WORDPRESS.COM unterstützen können!