Warum hat das Bild einen Überlauf: versteckt?

Ich frage mich, warum overflow: hidden automatisch in diesem Code angewendet wird. Ich weiß, es hat mit float zu tun, aber ich verstehe immer noch nicht warum.Warum hat das Bild einen Überlauf: versteckt?

img { 
 
    float: right; 
 
    margin: 0 0 10px 10px; 
 
}

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p> 
 
<p> 
 
    <img src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="2000" height="140">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus 
 
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis 
 
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Quelle

2016-10-22 Herrsocke

Ich denke, dass Sie in der CSS-Spezifikation an einem dieser Grenzfälle suchen.

Wenn Sie in Ihrem Beispiel das Bild nach links verschoben hätten, würden Sie wie erwartet eine horizontale Bildlaufleiste sehen.

Es scheint jedoch, dass Elemente, die nach rechts schweben und am linken Rand eine Überlaufbedingung verursachen, abgeschnitten werden.

Die CSS 2.1-Spezifikation in der folgenden Zeile auf diese anspielt:

Auch wenn ‚Überlauf‘ auf ‚sichtbar‘ eingestellt ist, kann Inhalt von der nativen Betriebsumgebung auf einen UA Dokumentfenster abgeschnitten.

Referenz: https://www.w3.org/TR/CSS21/visufx.html#overflow

Der gleiche Effekt findet auch, wenn Sie auf dem Bild, die absolute Positionierung verwenden sind.

Wenn Sie den Offset auf left: 0 setzen, wird eine Bildlaufleiste ausgelöst, während die Einstellung right: 0 stattdessen das Bild zum Abschneiden zwingt.

Die Leute, die am besten beantworten konnten, warum Browser auf diese Weise arbeiten, sind diejenigen, die tatsächlich die CSS-Rendering-Engines geschrieben haben, die in den modernen Browsern verwendet werden.

Unabhängig davon haben Sie einen interessanten Punkt angesprochen.

Quelle

2016-10-23 00:40:34

Tatsächlich wird overflow: hidden nirgends angewendet. Das Bild und das enthaltende Element p sind beide overflow: visible. Sie können dies in dev-Tools überprüfen:

jedoch durch float: right auf das Bild anwenden Sie overflow aus der Betrachtung entfernt haben. Mit anderen Worten, die Eigenschaft overflow hat keine Auswirkung.

Denken Sie über den Fluss des Inhalts nach.

Im Sprachenmodus von links nach rechts wird der Inhalt nach rechts überlaufen. Es läuft nicht nach links über.

Daher gilt die overflow Eigenschaft nicht für die linke, weil es technisch kein Überlauf gibt.

Von der Spezifikation:

11.1.1 Overflow: the overflow property

Diese Eigenschaft gibt an, ob der Inhalt eines Blockcontainerelement abgeschnitten wird, wenn er das Feld des Elements überläuft.

Auch im LTR-Lese-/Schreibmodus überläuft der Inhalt nicht nach links. Das Gegenteil wäre bei RTL der Fall. Verwenden Sie die CSS direction property, um zwischen ihnen zu wechseln.

Aus diesem Grund arbeitet eine Bildlaufleiste, wie in @MarcAudet's answer gezeigt, mit float: left. Aber es gibt keine Scrollleiste in Ihrem Code mit float: right.

Hier sind einige Lösungen:

Quelle

2016-10-23 00:40:48

Warum hat das Bild einen Überlauf: versteckt?

Antwort

Verwandte Themen