Heim  >  Artikel  >  Web-Frontend  >  Einfaches Tutorial für CSS Float und Float Clear (BFC).

Einfaches Tutorial für CSS Float und Float Clear (BFC).

PHPz
PHPzOriginal
2017-04-04 10:59:111827Durchsuche

Float

1. Was ist Float

Wenn der <a href="http://www.php.cn/wiki/%20919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> Wenn das Attribut nicht none ist, wird float generiert.

<p class="float">float</p>
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

2. Die Auswirkung von Floating

  1. Floating führt dazu, dass Elemente aus dem Dokumentenfluss ausbrechen, insbesondere wie folgt:

  • Das übergeordnete Element ist stark reduziert, d. h. es enthält keine schwebenden Elemente.
    Zum Beispiel wird der obige Code als

    Einfaches Tutorial für CSS Float und Float Clear (BFC).

    Das übergeordnete Element wird stark reduziert

  • Textumbruch angezeigt .

    Einfaches Tutorial für CSS Float und Float Clear (BFC).

    Textumbrucheffekt


    Sie können feststellen, dass die Breite des .normal-Elements das .float abdeckt Element, aber es gibt keinen Text unter dem .float-Element, was bedeutet, dass der Text „herausgedrückt“ wird. Dies liegt daran, dass er zwar aus dem Dokumentfluss ausbricht, aber nicht aus dem Textfluss ausbricht. Dieser Effekt ist auch die ursprüngliche Absicht des float-Attributs. Der Code lautet wie folgt:

    
      <p class="float">float</p>
      

    正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

    body {
      background-color: #ccc;
    }
    .float {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
    .normal {
      background-color: #fff;
    }
  • Die Ränder von schwebenden Elementen werden nicht zusammengeführt.
    Für verwandte Inhalte zur Margenzusammenführung können Sie hier klicken. Sobald das Element

  • schwebend ist, wird es zu einem Inline-Blockelement, d. h. <a href="http://www.php.cn/wiki/927" . .html target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block: inline-block.

  • 3. Floating-Anwendung

    • Textumbruch wie oben erwähnt.

    • Schreiben Sie ein dreispaltiges Layout mit fester Breite links und rechts und adaptiver Mitte.

      <body>
        <p class="left float">left</p>
        <p class="right float">right</p>
        <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
      </body>
      body {
        background-color: #ccc;
      }
      .float {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #ddd;
      }
      .left {
        float: left;
      }
      .right {
        float: right;
      }
      .mid {
        height: 100px;
        background-color: #fff;
        margin: 200px; /*故意加上了上下 margin 值*/
      }

      Hier habe ich absichtlich den Wert margin hinzugefügt, und Sie können den Effekt sehen:

      Einfaches Tutorial für CSS Float und Float Clear (BFC).

      drei Spalten Das Layout

      body fällt auch mit dem .mid von margin zusammen. Dies kann durch die zuvor eingeführte Randzusammenführung erklärt werden.

      ps: Als ich dieses dreispaltige Layout zum ersten Mal schrieb, war das HTML so geschrieben

      <body>
        <p class="left float">left</p>
        <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
        <p class="right float">right</p>
      </body>

      Schreiben Sie wie oben das mittlere adaptive Element in die Mitte. Tatsächlich ist dies der Fall Konsistenter. Logik, aber wenn es so geschrieben wird, wird das Element auf der rechten Seite nicht funktionieren, da das Element .mid ein Element auf Blockebene ist und nicht die gesamte Zeile ausfüllt herunterfallen, da es sich ursprünglich außerhalb des Dokumentenflusses schwebender Elemente befindet. .left

    Floating löschen

    Bei untergeordneten Elementen löschen

    Hier schreibe ich nur Methoden, die keine bedeutungslosen Tags erzeugen.

    • Wenn sich hinter dem schwebenden Element ein Geschwisterelement befindet, können Sie <a href="http://www.php.cn/wiki/%20917.html" hinzuf target="_blank">clear<p></p></a>-Attribut. <a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>Wenn der Text diesen Teil des Codes umgibt, fügen Sie clear<a href="http://www.php.cn/wiki/974.html" target="_blank">:left 🎜></a> oder
      . Auf die spezifische Verwendung von .normal wird hier nicht näher eingegangen. clear<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>clear:bothclearFügen Sie eine
    • Pseudoklasse
    • oder ein Pseudoelement zum zu löschenden Element hinzu.

      Informationen zur Verwendung von ::after finden Sie in der MDN-Dokumentation.

      .float::after {
        content: '';
        display: block;
        visiability: hidden;
        height: 0;
        clear: both;
      }

      wird auf dem übergeordneten Element gelöscht, also BFC
    BFC (Block

    For

    matting Context), also Formatierung auf Blockebene Kontext, seine offizielle Erklärung Ja:

    schwebende,

    absolut positionierte
    Elemente (<a href="http://www.php.cn/wiki/902.%20html" target=" _blank">Position<p></p></a> ist oder ), Inline-Blockelement<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>, absoluteTabellefixedZelledisplay:inline-block, Tabellentitel und <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a> Elemente, deren Attributwert nicht display:table-cell ist (außer dass der Wert an das Ansichtsfenster<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">Ansichtsfenster<code>display:table-caption weitergegeben wird ) erstellt einen neuen Formatierungskontext auf Blockebene. <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>visible<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a>Zusammenfassend muss es eine der folgenden Bedingungen erfüllen:

      Nicht
    1. floatnone

    2. ist nicht <a href="http://www.php.cn/wiki/188.html" target="_blank">statisch<li></a> oder

      position

    3. display steht für table-cell, table-caption, inline-block, flex, inline-flex

    4. overflow nicht for visible

    Solange Sie dem übergeordneten Element eines der oben genannten Attribute hinzufügen, um die Bedingungen zu erfüllen, kann das Hinzufügen von BFC zum übergeordneten Element das Floating löschen untergeordnetes Element.

    Das obige ist der detaillierte Inhalt vonEinfaches Tutorial für CSS Float und Float Clear (BFC).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn