Methode zum Löschen von Webseitenlayouts

Dieses Mal werde ich Ihnen die Layoutmethode der Webseite Clear Floating und die Vorsichtsmaßnahmen zum Löschen von Floating vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

Das Höhenproblem der Box

1. Die Höhe der Box im Standardfluss kann durch die Inhaltshöhe unterstützt werden;
Der schwebende Inhalt im schwebenden Fluss kann nicht unterstützt werden Unterstützen Sie die Höhe der Box;

Warum müssen wir den Float freigeben?

Wenn zwischen benachbarten Boxen die vordere Box keine Höhe hat, wird nach dem schwebenden Element in der hinteren Box gesucht Das Floating-Element im vorderen Feld führt dazu, dass die Benutzeroberfläche verwirrend wird. Sie müssen also die Float-Methode löschen:

Lösung:

Legen Sie die Höhe des vorherigen übergeordneten Elements fest

Hinweise:

In der Unternehmensentwicklung können wir die Höhe schreiben, ohne die Höhe zu schreiben, daher wird diese Methode selten verwendet;

CSS:

Body:

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;  //给前面盒子设置高度
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

Floating-Methode zwei löschen:

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>

Lösung:

Fügen Sie das Attribut „clear:both“ hinzu Box

clear-Attributwert:

keine: Standardwert, sortieren nach den Sortierregeln von Floating-Elementen (linker Float, Suche nach linkem Float, rechter Float, Suche nach rechtem Float)

links: Suchen Sie nicht nach dem vorherigen linken schwebenden Element (das heißt: nicht Wird in derselben Zeile wie das vorherige linke schwebende Element angezeigt)

rechts: Suchen Sie nicht nach dem vorherigen rechten schwebenden Element
beide : Suchen Sie nicht nach dem vorherigen linken schwebenden Element und dem rechten schwebenden Element

Hinweis:

Wenn wir das Attribut „clear“ zu einem Element hinzufügen, wird das Randattribut dieses Attributs ungültig Es wird nicht empfohlen,

CSS zu verwenden:

Floating-Methode drei löschen:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid #000;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            clear: both; //给后面的盒子添加clear:both;属性
            margin-top: 28px;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

Lösung:

Außenwandmethode: Fügen Sie einen zusätzlichen Block hinzu. level-Element zwischen zwei Boxen mit schwebenden untergeordneten Elementen; und legen Sie das Attribut „clear: Both“ fest;

Die Außenwandmethode ermöglicht nicht die Verwendung von

margin-bottom

Attributen.

Der Randeffekt kann jedoch durch Festlegen der Höhe zusätzlicher Tags erzielt werden.

Diese Technologie ist vorhanden Wird in Sohu häufig verwendet, wird jedoch nicht empfohlen, da eine große Anzahl bedeutungsloser Tags hinzugefügt werden muss :

Innenwandmethode:1 Fügen Sie zuletzt alle untergeordneten Elemente im ersten Feld hinzu. Ein zusätzliches Element auf Blockebene, 2 Setzen Sie „clear“: beide; Attribute für dieses zusätzliche Element auf Blockebene

Hinweis:

Innenwandmethode Damit kann das zweite Feld erstellt werden. Mit dem Rand-oben-Attribut

Innenwandmethode kann das erste Feld das Rand-unten-Attribut

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;            /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
        }
        .box2{
            background-color: green;            /*margin-top: 10px;*/  //外墙法它可以让第二个盒子使用margin-top属性,
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .wall{
            clear: both; //设置clear: both;属性;
        }
        .h20{
            height: 20px; //设置额外标签的高度来实现margin效果;
            background-color: skyblue;
        }
    </style>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

Was ist der Unterschied zwischen der Außenwandmethode und der Innenwandmethode?

Außenwandmethode Sie kann die Höhe des ersten Kastens nicht unterstützen, aber die Innenwandmethode kann die Höhe des ersten Kastens unterstützen

In der Unternehmensentwicklung wird die Trennwandmethode üblicherweise nicht zum Löschen von Floating verwendet (Trennwandmethode: Außenwandmethode und Innenwandmethode)

CSS:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf chinesischen PHP-Websites!

Empfohlene Lektüre:

<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

CSS-Hintergrund und Sprites

So verwenden Sie den CSS-Anzeigemodus

   <style>
        *{            margin: 0;            padding: 0;
        }        .box1{            background-color: red;            /*margin-bottom: 10px;*/
        }        .box2{            background-color: green;            /*margin-top: 10px;*/
        }        .box1 p{            width: 100px;            background-color: blue;
        }        .box2 p{            width: 100px;            background-color: yellow;
        }        p{            float: left;
        }        .wall{            clear: both;
        }        .h20{            height: 20px;            background-color: skyblue;
        }    </style></head>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20"></div> //设置内墙</div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

Das obige ist der detaillierte Inhalt vonMethode zum Löschen von Webseitenlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!