Wie ist die berechnete Breite des Blocks zu verstehen, der „white-space: pre;“ mit/ohne „float“ enthält?

Wie Sie im folgenden Code sehen können, divist der äußerste Scrolling-Container und der Kern in diesem Thema sectionein enthaltender Block, in dem spans als festgelegt ist white-space: pre;.

Einer sectionist extrem einfach und ist nur ein Block. Der andere .floatedist eingestellt float: left;.

Aber die berechnete Breite von ihnen ist unterschiedlich: Ersteres ist genauso breit wie sein umgebender Block, div dh 100pxin diesem Fall, im Gegensatz zu letzterem ist es so breit wie sein Inhalt (1287.47px von Firefox vorgegeben). Um diesen Unterschied besser sichtbar zu machen, habe ich für beide eine Hintergrundfarbe festgelegt.

Also kommt die Frage:

Mein Verständnis ist, dass die Breite eines Blocks width: auto;von seinem Inhalt abhängt. Warum ist das erste section nicht?

float: left;Der erwartete Effekt wird wie gezeigt durch die Verwendung von erzielt .floated, aber warum und wie funktioniert es? Was macht der genau float? Ein neuer BFC? Aber wenn ich auf wechsle floatauch display: flow-root;einen neuen BFC erstellt, geht es immer noch nicht.

Vielen Dank im Voraus für Ihre Hilfe!

div {
 border: 1px solid red;
 width: 100px;
 overflow: auto;
}
section {
 background-color: teal;
}
span {
 white-space: pre;
}
.floated {
 float: left;
}

 <div>
 <section>
 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
 <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
 <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
 <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
 <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
 </section>
 </div>
 
 <div>
 <section class="floated">
 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
 <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
 <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
 <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
 <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
 </section>
 </div>

Lösung des Problems

Mein Verständnis ist, dass die Breite eines Blocks mit width: auto; hängt von seinem Inhalt ab.

Das tut es nicht. Die Breite eines Elements auf Blockebene sollte diese Formel berücksichtigen:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = Breite des umgebenden Blocks

Wie Sie sehen können, spielt der Inhalt keine Rolle bei der Definition der Breite Ihres Elements, und es endet mit einer Breite, die der seines umgebenden Blocks (übergeordnetes Element) entspricht. Deshalb haben Sie das logische Ergebnis von 100px. Nachdem Sie die Breite definiert haben, sollte der Inhalt versuchen, diese Breite anzupassen, aber Sie haben Zeilenumbrüche mit deaktiviert, white-space: presodass Sie nur einen Überlauf erhalten.

Wenn Sie das div floaten lassen, müssen Sie einen anderen Teil der Spezifikation berücksichtigen, der die Breite von Floating-Elementen beschreibt, und Sie können lesen:

Wenn „Breite" als „Auto" berechnet wird, ist der verwendete Wert die „Anpassungsschrumpfen"-Breite.

Dann ist die Schrumpfbreite: min(max(preferred minimum width, available width), preferred width).

Der Inhalt wird im "Shrink-to-Fit"-Algorithmus berücksichtigt.

In Ihrem Fall erlauben Sie, da Sie verwenden white-space: pre, keinen Zeilenumbruch, sodass die "bevorzugte Mindestbreite" der Gewinner ist und Sie am Ende eine Breite haben, die dem längsten Satz entspricht

Wenn Sie das deaktivieren white-space, erzwingen Sie Zeilenumbrüche und Ihr Inhalt versucht, den "verfügbaren Platz" einzupassen, und beide Fälle liefern das gleiche Ergebnis, auch wenn wir unterschiedliche Algorithmen verwenden

div {
 border: 1px solid red;
 width: 100px;
 overflow: auto;
}
section {
 background-color: teal;
}
.floated {
 float: left;
}

<div>
 <section>
 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
 <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
 <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
 <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
 <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
 </section>
 </div>
 
 <div>
 <section class="floated">
 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
 <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
 <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
 <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
 <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
 </section>
 </div>