Was ist Clearfix?-HTML-Tutorial-php.cn

Was ist Clearfix?

王林

Freigeben： 2023-08-26 19:53:12

nach vorne

1541 Leute haben es durchsucht

Was ist Clearfix?

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 von

Beispiel

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>

Nach dem Login kopieren

Die Ausgabe zeigt das Überlaufproblem −

Verwenden Sie die Überlaufautomatik, um das Clear-Floating-Problem zu beheben

Die chinesische Übersetzung von

Beispiel

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>

Nach dem Login kopieren

Korrigieren Sie den Clear-Float mit dem ::after-Selektor

Die chinesische Übersetzung von

Beispiel

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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas ist Clearfix?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!