什么是clearfix？

王林转载: 2023-08-26 19:53:12 914浏览

什么是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

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" width="150" height="150">
      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 −

使用overflow auto修复清除浮动问题

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" width="150" height="150">
      Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
      scelerisque, quis porta nisl sagittis.
   </div>
</body>
</html>

使用::after选择器修复清除浮动

Example

的中文翻译为：

示例

The ::after选择器在这里用于修复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" width="150" height="150">
      Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
      scelerisque, quis porta nisl sagittis.
   </div>
</body>
</html>

以上就是什么是clearfix？的详细内容，更多请关注php中文网其它相关文章！

clearfix (清除浮动) CSS (层叠样式表) float (浮动)PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：在JavaScript中，parseInt()方法的作用是什么？下一条：移动Safari如何确定何时在HTML中提示用户共享位置？