CSS-Implementierung zur Behebung schwebender Probleme-CSS-Tutorial-php.cn

CSS-Implementierung zur Behebung schwebender Probleme

零到壹度

Freigeben： 2018-03-27 16:36:47

Original

1786 Leute haben es durchsucht

Zuerst müssen wir über eine Frage nachdenken: Warum sollten wir den Schwimmer räumen? Als ich eine kleine Demo machte, stieß ich auf ein Problem, als das untergeordnete Element schwebte und die Hintergrundfarbe des übergeordneten Elements verschwand. Man kann sagen, dass ich bei meinem damaligen Rookie-Level nicht wusste, warum die Hintergrundfarbe des übergeordneten Elements fehlte. Könnte es sein, dass das Farbformat falsch war? Oder ist der Browser inkompatibel und handelt es sich um einen CSS-Hack? ? ? ? ? ? ? ? Alle Vermutungen deuten auf die Hintergrundfarbe hin, es ist die Schuld der Hintergrundfarbe.

Warum müssen wir Schwimmer räumen?

Ich kämpfte weiter in der Grube und bekam die Antwort. Es war nicht die Schuld der Hintergrundfarbe. Aber es sind untergeordnete Elemente. Wenn das untergeordnete Element schwebt, wird die Höhe des übergeordneten Elements 0. Warum ist das so?

Der Grund dafür ist, dass das übergeordnete Element keine Höhe festlegt wird durch das untergeordnete Element bestimmt. Die Elemente halten es aufrecht. Wenn das untergeordnete Element schwebt, befindet sich das untergeordnete Element außerhalb des Dokumentflusses und das übergeordnete Element befindet sich noch im Dokumentfluss. Zu diesem Zeitpunkt enthält der Inhalt des übergeordneten Elements nichts, sodass die Höhe des übergeordneten Elements zum Original wird nicht eingestellte Höhe (0) . Wenn der Inhalt des übergeordneten Elements nicht schwebende Elemente enthält, wird die Höhe des übergeordneten Elements durch die höchste Höhe dieser Elemente unterstützt. Wie im Bild gezeigt:

HTML-Code
<p>
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
Nach dem Login kopieren
Wenn kein Float vorhanden ist:

HTML-Code
<p>        //此时大图片左浮动，及下图的效果
        <img src="./2.png" alt="" style = "float: left;">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
Nach dem Login kopieren
Situation beim Schweben: (Großes Bild schweben: links ; Klein Bilder bleiben unverändert)

kann aus der obigen Analyse abgeleitet werden. Schwebende untergeordnete Elemente führen zu einer „Höhenreduzierung“ des übergeordneten Elements.
Wie lösche ich den Float?
Es gibt viele Möglichkeiten, Floats zu löschen. Derzeit gibt es etwa acht Möglichkeiten, Floats zu löschen. Es gibt jedoch zwei häufigste Möglichkeiten, es in Projekten zu verwenden:
1. Fügen Sie die Pseudoklasse hinzu; .Pseudoklasse hinzufügen: after
Fügen Sie dem übergeordneten Element einen Klassen-Clearfix hinzu und legen Sie die Pseudoklasse: after für diese Klasse fest.
Schau! Dies ist die erste Möglichkeit, einen Float zu löschen. Es ist auch eine beliebte Methode, schwebende Gegenstände zu beseitigen.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix:after {            content: " ";            display: block;            clear: both;        }
        .a {            float: left;        }
    </style></head><body>
    <p class="container clearfix">
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
  </body>
  </html>
Nach dem Login kopieren
2. BFC auslösen
1) Was ist BFC?

BFC (Block Formatting Context) ist der CSS-Rendering-Modus für das Box-Modell-Layout in Webseiten. Sein Positionierungssystem gehört zum regulären Dokumentenfluss. Auszug aus W3C: Gleitende, absolut positionierte Elemente, Inline-Blöcke, Tabellenzellen, Tabellenüberschriften und Überlaufelemente, deren Wert nicht sichtbar ist (es sei denn, dieser Wert wurde angezeigt). übergeben Wenn das Ansichtsfenster erreicht ist, wird ein neuer Formatierungskontext auf Blockebene erstellt.
Das obige Zitat fasst ziemlich genau zusammen, wie ein BFC entsteht. Aber definieren wir es anders, um es besser zu verstehen. Ein BFC ist eine HTML-Box und erfüllt mindestens eine der folgenden Bedingungen:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个
overflow的值不为visible
2) 如何用BFC清除浮动
粗暴的总结就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {            overflow: hidden;        }
        .a {            float: left;        }
    </style></head><body>
    <p>
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
   </body>
   </html>
Nach dem Login kopieren
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素

Das obige ist der detaillierte Inhalt vonCSS-Implementierung zur Behebung schwebender Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!