Warum erstrecken sich schwebende Elemente über ihren übergeordneten Container hinaus?

Warum sich schwebende Elemente über das enthaltende Div hinaus erstrecken

Wenn Elementen innerhalb eines Divs ein Gleitkomma zugewiesen wird, können sie sich über die Grenzen des Div hinaus erstrecken div. Dies liegt daran, dass schwebende Elemente aus dem normalen Fluss des Dokuments entfernt werden, wodurch sie um andere Elemente herum positioniert werden, anstatt an sie anzugrenzen. Daher tragen sie nicht zur Breite des enthaltenden Div bei.

Lösungen zum Dehnen schwebender Elemente

1. Overflow:hidden

Eine einfache Lösung besteht darin, overflow:hidden zum übergeordneten Div hinzuzufügen. Dadurch wird alles, was über die Grenzen der Eltern hinausgeht, ausgeblendet:

#parent { overflow: hidden }

2. Floating Parent Div

Eine andere Möglichkeit besteht darin, auch das Parent Div zu schweben:

#parent { float: left; width: 100% }

Dadurch verhält sich das Parent Div wie ein Floating-Element, sodass die Floating Child-Elemente es beeinflussen können Höhe.

3. Clear-Element

Die Verwendung eines Clear-Elements kann das Problem ebenfalls lösen:

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="Warum erstrecken sich schwebende Elemente über ihren übergeordneten Container hinaus?" >
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

Das Clear-Element unterbricht den Fluss des schwebenden untergeordneten Elements und schiebt es nach unten der übergeordneten Abteilung

Das obige ist der detaillierte Inhalt vonWarum erstrecken sich schwebende Elemente über ihren übergeordneten Container hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!