Floating-Elemente in HTML und CSS: Wie wirken sie sich dennoch auf den Seitenfluss aus?

Floating-Elemente: Navigieren im Fluss

In HTML und CSS sind Floating-Elemente ein Schlüsselkonzept für Layout und Design. Allerdings kann es etwas schwierig sein, ihr Verhalten zu verstehen. Lassen Sie uns in die Welt der schwebenden Elemente eintauchen und einige häufig gestellte Fragen untersuchen.

„Immer noch ein Teil des Flusses bleiben“

Floating-Elemente werden oft als entfernt beschrieben den normalen Fluss der Seite und bleiben dennoch ein Teil davon. Dieses Konzept kann zunächst verwirrend sein, insbesondere wenn man bedenkt, dass schwebende Elemente andere Elemente überlappen können.

Der Schlüssel zum Verständnis liegt darin, dass schwebende Elemente weiterhin den Fluss von Text und Inline-Elementen beeinflussen. Auch wenn sie aus dem physischen Layout der Seite entfernt sind, beeinflussen sie dennoch, wie der Text sie umschließt. Aus diesem Grund gelten sie als „immer noch Teil des Flusses“.

Betrachten Sie zum Beispiel den Beispiel-HTML- und CSS-Code:

<code class="html"><section>
  <div class="left">Left</div>
  <div class="left_second">Middle</div>
  <div class="right">Right</div>
</section></code>

<code class="css">section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  background: blue;
}

.right {
  float: right;
  background: cyan;
}</code>

Wenn wir den Float hinzufügen : links; Wenn Sie die Eigenschaft auf das erste div .left verschieben, wird sie auf die linke Seite des Containers verschoben, sodass der Text um sie herum umbrochen werden kann. Das zweite und dritte Div sind normal relativ zum ersten Div positioniert. Dies zeigt, dass das erste Div zwar schwebend ist, es aber dennoch den Textfluss um es herum beeinflusst.

Außerhalb des enthaltenden Blocks

Lassen Sie uns nun darauf eingehen, warum das Das dritte Div liegt außerhalb des enthaltenden Blocks. Im Beispielcode ist der enthaltende Block der Element. Da das dritte Div .right float: right; hat, wird es an den rechten Rand des enthaltenden Blocks verschoben.

Wenn der enthaltende Block nicht breit genug ist, um das schwebende Element aufzunehmen, wird es nach außen verschüttet des Blocks. In diesem Fall ist der umschließende Block zu schmal für das dritte Div, sodass er überläuft und außerhalb des Abschnitts erscheint.

Um dies zu verhindern, können wir entweder die Breite des umschließenden Blocks erhöhen oder die Clearfix-Technik verwenden, um dies zu verhindern klare schwebende Elemente. Bei der Clearfix-Technik wird ein verstecktes Element mit „clear: Both“ hinzugefügt. um zu erzwingen, dass der enthaltende Block alle seine schwebenden Elemente enthält.

Das obige ist der detaillierte Inhalt vonFloating-Elemente in HTML und CSS: Wie wirken sie sich dennoch auf den Seitenfluss aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!