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>
<!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>
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>
<!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>
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>
<!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>
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!