What is clearfix?-HTML Tutorial-php.cn

What is clearfix?

王林

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

forward

1515 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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