Warum Grenze nicht alle Elemente abdecken

Question

Ich verwende Grenzeigenschaften von CSS. Wenn ich keine Überlaufeigenschaften hinzufüge, deckt es nicht alle Elemente des ID-Inhalts ab.

#contents{border-radius: 10px; border: 1px solid red;overflow:hidden;}

<div id="contents"> 
 
    \t \t \t \t <aside> 
 
    \t \t \t \t \t <nav> 
 
    \t \t \t \t \t \t <ul> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Home Page</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Main Settings</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Sections</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Pages</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Comments</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Library</a> 
 
    \t \t \t \t \t \t </ul> \t \t \t \t 
 
    \t \t \t \t \t </nav> 
 
    \t \t \t \t </aside> 
 
    \t \t \t \t <section id="page"> 
 
    \t \t \t \t \t <p>Hello </p> 
 
    \t \t \t \t </section> 
 
    </div>

enter image description here

enter image description here

Warum korrigiert werden können Überlaufelement in Code hinzufügen ???

Answer 1

Von was ich sehen kann, haben Sie ein Floating-Elemente-Problem, das Problem ist.

Ein CSS-Clearfix wird verwendet, um Probleme im Zusammenhang mit untergeordneten untergeordneten Elementen in einem übergeordneten Element zu beheben. Ohne ein Clearfix wird Ihr Kind Elemente nicht so verhalten, wie Sie sie auch erwarten. Wenn ein HTML-Element floated ist, kann es so aussehen, als ob es außerhalb seines Elternelements sitzt, und das bedeutet es passt die Elternhöhe dementsprechend nicht an.

Also in Ihrem Fall sind die inneren Elemente schwebende Elemente. Daher erkennt der Container die Höhe nicht richtig.

Warum funktioniert es, wenn Sie overflow:hidden verwenden?

der Überlauf-Methode beruht auf einem Mutterelement den Überlauf CSS-Eigenschaft auf Einstellung. Wenn diese Eigenschaft im übergeordnetem Element auf auto oder ausgeblendet gesetzt ist, wird das übergeordnete Element so erweitert, dass es die Gleitkommazahlen enthält, , wodurch es effektiv für nachfolgende Elemente gelöscht wird.

Dies ist möglicherweise der Grund, warum der Elternteil den Raum füllt.

Um mehr über CSS clearfixes zu lesen Read here und here