Beispiele stellen sechs Möglichkeiten vor, schwebendes HTML als Referenz zu löschen.-HTML-Tutorial-php.cn

Beispiele stellen sechs Möglichkeiten vor, schwebendes HTML als Referenz zu löschen.

伊谢尔伦

Freigeben： 2017-07-20 09:58:30

Original

1460 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

3. Fügen Sie

.clear hinzu { height:0px;font-size:0;clear:both;} Aber unter ie6 hat das Blockelement eine Mindesthöhe, das heißt, wenn height<19px ist, ist der Standardwert 19px, Lösung: Font-Size:0; overflow:hidden;

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

4. Fügen Sie
<🎜 unter dem schwebenden Element hinzu >

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!