Heim >Web-Frontend >HTML-Tutorial >Was ist Clearfix?
Was ist Clearfix?
- 王林nach vorne
- 2023-08-26 19:53:121530Durchsuche
Der Clearfix wird, wie der Name schon sagt, zum Löschen von Floats verwendet. Er wird im Allgemeinen in Float-Layouts verwendet.
Überlaufproblem
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Lassen Sie uns zuerst das Problem betrachten, bevor wir uns der Lösung zuwenden. Wir haben hier ein Bild, das außerhalb seines Containers schwebt, da es viel höher ist als das dazugehörige Element −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
Die Ausgabe zeigt das Überlaufproblem −
Verwenden Sie die Überlaufautomatik, um das Clear-Floating-Problem zu beheben
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Lassen Sie uns das Problem jetzt mit Clearfix beheben −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
Korrigieren Sie den Clear-Float mit dem ::after-Selektor
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Der ::after-Selektor ist hier, um Clearfix zu beheben −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWas ist Clearfix?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Welche Rolle spielt in JavaScript die Methode parseInt()?Nächster Artikel：Welche Rolle spielt in JavaScript die Methode parseInt()?