Heim > Artikel > Web-Frontend > Mehrere Methoden zum Löschen von Floats in HTML
Mehrere Methoden zum Löschen von Floats in HTML
- 不言Original
- 2018-06-25 09:30:222068Durchsuche
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> 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>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>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> 3. Fügen Sie5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3
.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
<!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> 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>rrreezum ü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!