search

Home >Web Front-end >HTML Tutorial >What is clearfix?

What is clearfix?

王林
王林forward
2023-08-26 19:53:121530browse

What is clearfix?

The clearfix, as the name suggests, is used to clear floats. It is generally used in float layouts. The clearfix is ​​considered a hack to clear floats.

Overflow Issue

The Chinese translation of

Example

is:

Example

Let us see the problem first before moving towards the solution. We have an image here, floated to the right. It overflows outside its container since it is way taller than the element belonging to it −

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

The output displays the overflow issue −

Use overflow auto to fix the problem of clearing floats

The Chinese translation of

Example

is:

Example

Let us now fix the issue with clearfix −

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

Use ::after selector to fix clearing floats

The Chinese translation of

Example

is:

Example

The ::after selector is used here to fix clearfix −

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

The above is the detailed content of What is clearfix?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：In JavaScript, what is the role of the parseInt() method?Next article：In JavaScript, what is the role of the parseInt() method?

Related articles

See more