Heim > Artikel > Web-Frontend > Beispiele stellen sechs Möglichkeiten vor, schwebendes HTML als Referenz zu löschen.
Beispiele stellen sechs Möglichkeiten vor, schwebendes HTML als Referenz zu löschen.
- 伊谢尔伦Original
- 2017-07-20 09:58:301504Durchsuche
Was passiert, wenn display: inline-block verwendet wird:
1. Stellen Sie sicher, dass das Blockelement in einer Zeile angezeigt wird
2. Legen Sie die Breite und Höhe der Inline-Unterstützung fest
3. Zeilenumbrüche werden geparst
4. Wenn nicht gesetzt, wird die Breite um den Inhalt erweitert
5. Block-Tags werden in IE6 und 7 unterstützt.
Da das Inline-Block-Attribut geparst wird (dort ist eine Lücke), wenn Zeilenumbrüche sind. Die Lösung besteht darin, float:left/right zu verwenden.
Was passiert, wenn float:
1 das Blockelement in einer Zeile anzeigt
2 Breite und Höhe unterstützen
3. Wenn die Breite und Höhe hoch sind, wird die Breite durch den Inhalt gedehnt
4 Elemente, Sie können Floats verwenden, um Lücken zu schließen)
5. Das Hinzufügen von Floats zu Elementen unterbricht den Dokumentfluss und folgt der angegebenen Bewegung in eine Richtung, bis es die Grenze des übergeordneten Elements erreicht oder ein anderes Floating-Element stoppt (das Dokument). Fluss ist die Position, die von anzeigbaren Objekten im Dokument eingenommen wird, wenn sie angeordnet sind)
Methode zum Löschen von Float:
1. Fügen Sie einen Float zum übergeordneten Element hinzu (in diesem Fall dem übergeordneten Rand). : 0 automatisch; wird 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ügen Sie display: inline- zum übergeordneten Block 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 Sie 3d00d0db47c94ab511106c0243c8fa83
.clear hinzu { height:0px;font-size:0;clear:both;} Aber unter ie6 hat das Blockelement eine Mindesthöhe, das heißt, wenn height
<!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>
4. Fügen Sie 079d205125cc08b5a6372726f48e58b9
<!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>5. Fügen Sie {zoom:1;}
:after{content:""; display:block;clear:both;} zum übergeordneten Element des schwebenden Elements hinzu
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加<p class="clear"></p>
.clear{ height:0px;font-size:0;clear:both;}
4.在浮动元素下加<br clear="all"/>
5. 给浮动元素的父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
**在IE6，7下浮动元素的父级有宽度就不用清浮动
haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
width: (任何值除了auto)
zoom: (除 normal 外任意值)
*/
</style>
</head>
<body>
<p class="box clear">
<p class="p"></p>
</p>
</body>
</html>6 . Überlauf hinzufügen:auto zum übergeordneten 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;border:1px solid #000;overflow:auto;}
.p1{ width:260px;height:400px;background:Red;float:left;}
</style>
</head>
<body>
<p class="box">
<p class="p1"></p>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispiele stellen sechs Möglichkeiten vor, schwebendes HTML als Referenz zu löschen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!