Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die Verwendung von CSS zum Löschen von Floating Clearfix und Clear

Eine kurze Diskussion über die Verwendung von CSS zum Löschen von Floating Clearfix und Clear

高洛峰Original: 2017-03-17 16:33:511926Durchsuche

Der folgende Editor bietet Ihnen eine kurze Diskussion über die Verwendung von CSS Clear Float (clearfix und clear). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dieser Artikel erklärt hauptsächlich die Verwendung von Clearfix und Clear in HTML für Kinder, die gerade erst anfangen, CSS zu verstehen. Ich werde hier nicht über die Stile Clearfix und Clear schreiben.

Lassen Sie uns zunächst über die Verwendung dieser beiden Klassen sprechen:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

Wir alle wissen, dass die Verwendung von Floats viele unbekannte Probleme verursachen wird Sie können feststellen, dass die Höhe von class="demo" nicht durch das p im Inneren gedehnt wird. Dies liegt daran, dass das p im Inneren schwebt und sich vom Dokument löst. Da das Demo selbst keine Höhe hat, können wir seinen grauen Hintergrund nicht sehen. Geben Sie der Demo natürlich nur eine Höhe an, aber das weicht vom Zweck dieses Artikels ab (manchmal möchten wir, dass die Höhe des äußeren p durch den Inhalt im Inneren bestimmt wird).

Da es sich um ein durch Floating verursachtes Problem handelt, löschen Sie einfach das Floating. Ich glaube, Experten haben viele Möglichkeiten, das Floating zu beheben, wie zum Beispiel overflow:hidden. Im Folgenden werde ich die Verwendung von Clearfix und Clear-to-Clear-Floats vorstellen.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <h2>用 clear 清除浮动</h2>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
        <p class="clear"></p>
    </p>
    <h2>用 clearfix 清除浮动</h2>
    <p class="clearfix demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

Wir haben festgestellt, dass Clearfix hauptsächlich auf der übergeordneten Schicht der schwebenden Schicht verwendet wird, während Clear hauptsächlich zwischen der schwebenden Schicht und der schwebenden Schicht verwendet wird und bei auf derselben Ebene wie die schwebende Ebene. Wenn Sie die Höhe der übergeordneten Ebene erweitern möchten, sollte „clear“ am Ende platziert werden.

Es ist schwer zu sagen, welche dieser beiden Methoden besser ist. Ich kann nur sagen, dass auf spezifische Bedürfnisse im Detail eingegangen werden sollte.

Verwandte Artikel:

Eingehende Analyse von Clearfix zum Löschen von Floats

Eingehendes Verständnis der Verwendung von Clearfix in CSS

CSS über die Clearfix-Clearing-Floating-Methode

Die umfassendste CSS-Clearfix-Clearing-Floating-Methode

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verwendung von CSS zum Löschen von Floating Clearfix und Clear. 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

Vorheriger Artikel：Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der MausNächster Artikel：Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus

In Verbindung stehende Artikel

Mehr sehen