Mehrere Methoden zum Löschen von Floats in HTML-HTML-Tutorial-php.cn

Mehrere Methoden zum Löschen von Floats in HTML

不言

Freigeben： 2018-06-25 09:30:22

Original

2126 Leute haben es durchsucht

In diesem Artikel werden 6 Möglichkeiten zum Löschen der schwebenden HTML-Elemente als Referenz beschrieben. Weitere Informationen finden Sie unten.

Was passiert, wenn display: inline-block verwendet wird:

1. Blockelemente in einer Zeile anzeigen

2. Zeilenumbrüche werden analysiert

4. die Breite ist Inhalt ist gestreckt

5. Block-Tags werden in IE6 und 7 unterstützt.

Da das Inline-Block-Attribut beim Umschließen analysiert wird (es gibt eine Lücke), besteht die Lösung darin Verwenden Sie Floating Float: links/rechts

Situationen, die bei der Verwendung von Floats auftreten:

1. Sorgen Sie dafür, dass Blockelemente in einer Zeile angezeigt werden

Stellen Sie sicher, dass Inline-Elemente Breite und Höhe unterstützen

3. Legen Sie Breite und Höhe nicht fest. Wenn die Breite durch den Inhalt gedehnt wird löst sich vom Dokumentfluss und bewegt sich in eine bestimmte Richtung, bis es die Grenze des übergeordneten Elements erreicht oder ein anderes schwebendes Element stoppt (der Dokumentfluss ist die Position, die die anzeigbaren Objekte im Dokument einnehmen, wenn sie angeordnet sind)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>

Nach dem Login kopieren

Der folgende Code schwebt nur Box1, dann überlappen Box1 und Box2 zusammen. Wenn beide schwebend sind, gibt es keine Überlappung

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<p class="box1"></p>
<p class="box2"></p>
</body>
</html>

Nach dem Login kopieren

Methode zum Löschen des Gleitens:

1 Fügen Sie dem übergeordneten Element ein Gleiten hinzu

(in diesem Fall, wenn der übergeordnete Rand: 0 auto; Nicht zentriert)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

Nach dem Login kopieren

2. Füge display:inline-block; zum übergeordneten Element hinzu (wie Methode 1, nicht zentriert. Nur IE6 und 7 sind zentriert)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

Nach dem Login kopieren

3. Fügen Sie

.clear{ height:0px;font-size:0;clear:both } hinzu. Aber unter IE6 hat das Blockelement eine Mindesthöhe, das heißt, wenn die Höhe <19px ist, ist die Standardlösung 19px . Fügen Sie unter dem schwebenden Element

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
        <p class="clear"></p>
</p>
</body>
</html>

Nach dem Login kopieren

5 hinzu übergeordnetes Element des schwebenden Elements.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ width:300px;margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} /* 清浮动 1.给父级也加浮动 2.给父级加display:inline-block 3.在浮动元素下加<p class="clear"></p> .clear{ height:0px;font-size:0;clear:both;} 4.在浮动元素下加<br clear="all"/> */ </style> </head> <body> <p class="box"> <p class="p"></p> <br clear="all"/> </p> </body> </html>
Nach dem Login kopieren
rrree
zum übergeordneten Element des schwebenden Elements hinzufügen Es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie HTML, um das Rechtsklick-Menü und die Linksklick-Wischfunktion zu blockieren

Über HTML-Textformatierungscode

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