So lösen Sie das Höhenkollapsproblem in HTML

In diesem Kapitel erfahren Sie, wie Sie das Höhenkollapsproblem in HTML lösen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Das Problem des Höhenkollapses:
Wenn der BFC eines Elements aktiviert ist, weist das Element die folgenden Eigenschaften auf:

1 Übergeordnetes Element Die vertikalen Ränder überlappen sich nicht mit untergeordneten Elementen.
Elemente mit aktiviertem BFC werden nicht von schwebenden Elementen abgedeckt.
Elemente mit aktiviertem BFC können schwebende untergeordnete Elemente enthalten.

So wie das Element BFC öffnen?
Setzen Sie das Element auf float
Setzen Sie das Element auf absolute Position
Setzen Sie das Element auf inline-block

float:left; (schlecht) Obwohl das übergeordnete Element gestreckt werden kann Dies führt dazu, dass die Breite des übergeordneten Elements verloren geht. Bei Verwendung dieser Methode werden die unteren Elemente nach oben verschoben.

display:inlink-block; Das Layout ist fertig, aber die Breite ist weg. Allerdings führt dies zu einem Breitenverlust, daher wird diese Methode nicht empfohlen.

Legen Sie den nicht sichtbaren Wert des Überlaufelements fest:
overflow:auto; Lösen Sie den Höhenkollaps des übergeordneten Elements mit minimalen Nebenwirkungen.

Kompatibilität

Es gibt kein BFC in IE6, aber es gibt ein anderes implizites Attribut namens hasLayout.
Dieses Attribut hat eine ähnliche Funktion wie BFC und ist in verfügbar IE6 Der Browser löst das Problem, indem er hasLayout aktiviert.

Methode:
Stellen Sie den Zoom des Elements auf 1 ein: zoom:1

Wenn in IE6 eine Breite für ein Element angegeben wird, wird diese standardmäßig aktiviert

hasLayout.

clear: Beide löschen den Float von dem Element, das die größte Auswirkung hat

Lösung 2 zur Lösung eines hohen Zusammenbruchs

Sie können ein leeres div
direkt am Ende des reduzierten übergeordneten Elements hinzufügen. Da dieses div nicht schwebend ist, kann es die Höhe des übergeordneten Elements erweitern
und dann den schwebenden Bereich löschen Dass Sie dieses leere Div verwenden können, um die Höhe des übergeordneten Elements zu vergrößern, hat im Grunde keine Nebenwirkungen.
Obwohl es das Problem lösen kann, fügt es der Seite eine redundante Struktur hinzu.

Verwenden Sie die After-Pseudoklasse, um sie als Element auf Blockebene festzulegen und die Floats auf beiden Seiten zu löschen, um das Problem des Zusammenbruchs der übergeordneten Klasse zu lösen
Durch die After-Pseudoklasse Klasse, wählen Sie die Rückseite von Box1 aus

.box1:after{
         content:"";
         display:block;
         //清除两侧的浮动
         clear:both;
}
 /* IE6不支持伪类。  zoom:1;*/
.clearfix:after{
         /*添加一个内容*/
         content:"";
         /*转换为一个块元素*/
         display:block;
         /*清除两侧的浮动*/
         clear:both;
     }
 /*在IE6中不支持after伪类，
     所以在IE6中还需要使用hasLayout来处理*/

     .clearfix{
         zoom:1;
     }

Wenn das obige Element in IE6 ein Inline-Element ist, wird es nicht schweben

Ultimative Version:

//Der modifizierte Clearfix ist multifunktional
/ / Er kann nicht nur den Höhenkollaps lösen, sondern auch sicherstellen, dass sich die vertikalen Ränder des übergeordneten Elements
und des untergeordneten Elements überlappen

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Höhenkollapsproblem in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!