Ausführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet-CSS-Tutorial-php.cn

Ausführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet

高洛峰

Freigeben： 2017-03-08 13:10:46

Original

1910 Leute haben es durchsucht

Wenn wir Float zum Festlegen von Floating-Elementen verwenden, stoßen wir oft auf die Situation, dass p kaputt geht. Eine der Lösungen ist die Verwendung von overflow:hidden .p's Methode:

Viele Leute, die sich für Front-End-Ingenieure bewerben, werden während des Vorstellungsgesprächs mit solchen Float-Fragen konfrontiert.
Zum Beispiel: Die beiden Unterelemente p innerhalb des p-Elements sind beide float:left und das äußere p hat keine Höhe. Was sollen wir zu diesem Zeitpunkt tun?
Die übliche Lösung besteht darin, dem Element im Layoutfluss ein After-Pseudoelement hinzuzufügen und es auf display: block und clear: Both zu setzen.

p:after {content: "";display: block;clear: both;}

Nach dem Login kopieren

Aber heute habe ich zufällig entdeckt, dass overflow:hidden auch p öffnen kann! Wie folgt:
Ich habe mehr Wissen gewonnen.

<body>
  <p>
    <p>I am floated</p>
    <p>So am I</p></p><style>p {   
    overflow: hidden;}p {   
    float: left;}</style>

Nach dem Login kopieren

Gehen Sie tiefer
Lassen Sie uns tiefer gehen und uns das folgende Beispiel ansehen:
Schreiben Sie den folgenden Code und check Effekt
HTML-Code:

<p class="content">
    <p class="p1">

    </p>
</p>

Nach dem Login kopieren

CSS-Code:

.content {   
    border: 1px solid red;   
}   
.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}

Nach dem Login kopieren

Der Effekt ist wie folgt:
Ausführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet

Fügen Sie ein p1 im Inhalt hinzu und legen Sie den Rahmen des Inhalts-Tags sowie die Größe und Farbe des p1-Tags fest. Sie können sehen, dass das Inhalts-Tag das p1-Tag umschließt. Und es unterstützt auch die Größe des Inhalts-Tags

Wenn wir jedoch das Attribut von p1 so einstellen, dass es nach rechts schwebt

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

Nach dem Login kopieren

, sieht es so aus :
Ausführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet

Der p1-Tag ist zwar rechtsbündig, unterstützt aber nicht die Höhe des Content-Tags.
Keine Sorge, wir müssen ein Attribut festlegen, nämlich das Überlaufattribut zum Inhalts-Tag hinzufügen

Attribut hinzufügen (Überlauf: versteckt;)

.content {   
    border: 1px solid red;   
    overflow: hidden;   
}

Nach dem Login kopieren

Hinzufügen Nach Abschluss sieht der Effekt so aus
Ausführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie das CSS-Überlaufattribut verwenden, um zu verhindern, dass Float ein Div öffnet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!