CSS Clearfix清除浮动

什么是Clearfix

CSS Clearfix 是一种技术，确保容器正确包含和包括其中的浮动元素。它通过向容器添加一个空元素来防止布局问题，该空元素清除左右两侧的浮动，使得容器可以扩展并保持预期的布局。

清除浮动有助于避免容器折叠、高度不一致、内容重叠、对齐不一致等问题。

本章将探讨清除浮动技术如何确保容器元素正确包含其浮动子元素。

CSS 清除浮动

如上所述，CSS清除浮动修复了期望元素中的溢出元素。可以针对以下三个属性进行操作：

Overflow和Float属性
Height属性
Clear属性

下图展示了清除浮动布局的参考示意图：

CSS Clearfix清除浮动

如果一个元素比包含它的元素更高，并且它是浮动的，它将溢出到容器之外。我们可以通过设置overflow: auto;解决这个问题。

CSS 溢出和浮动属性

让我们看一个例子，其中图像比其容器的高度更大，导致图像超出其容器的边界，并且可能破坏布局。

示例

<html>
<head>
 <style>
   div { 
      border: 2px solid #f0610e; padding: 5px; background-color: #40a944;
   }
   .img { 
      float: right; border: 3px solid #40a944;
   }
 </style>
</head>
<body>
 <h2>Without Clearfix</h2>
 <div>
     <img class="img" src="images/tutimg.png" width="200" height="200">
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
 </div>
</body>
</html>

解决这个溢出问题，我们可以将 overflow: auto; 属性设置给相应的元素，确保图像完全包含在容器内。

让我们看一个例子：

<html>
<head>
 <style>
   div { 
      border: 2px solid #f0610e; padding: 5px; 
      background-color: #40a944; overflow: auto;
    }
   .img { 
      float: right; border: 3px solid #40a944;
   }
 </style>
</head>
<body>
 <h2>With Clearfix</h2>
 <div>
     <img class="img" src="images/tutimg.png" width="200" height="200">
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
 </div>
</body>
</html>

设置CSS高度属性

您也可以通过设置<div>元素的高度与浮动图像的高度相似来实现清除浮动。

示例

让我们看一个例子：

<html>
<head>
<style>
   div { 
      border: 2px solid #f0610e; padding: 10px; 
      height: 120px; background-color: #40a944; 
   }
   .img { 
      float: right; border: 3px solid #f0610e; 
   }
</style>
</head>
<body>
   <div>
      <img class="img" src="images/tutimg.png" width="120" height="120">
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>

设置CSS清除属性

CSS Clear 属性适用于浮动和非浮动元素。它设置了一个元素是否必须在其前面的浮动元素下面（清除）移动。

Clear属性可以有以下值之一：

none: 是一个关键词，指示元素不会向下移动以清除之前的浮动元素。
left: 是一个关键词，指示元素会向下移动以清除左浮动。
right: 是一个关键词，指示元素会向下移动以清除右浮动。
both: 是一个关键词，指示元素会向下移动以清除左右浮动。
inline-start: 是一个关键词，指示元素会向下移动以清除其包含块开头的浮动，即LTR脚本上的左浮动和RTL脚本上的右浮动。
inline-end: 是一个关键词，指示元素会向下移动以清除其包含块尾部的浮动，即LTR脚本上的右浮动和RTL脚本上的左浮动。

将Clear设置为left

以下示例演示了使用 clear:left 属性的clearfix：

<html>
<head>
<style>
   .main { 
      border: 1px solid black; padding: 10px; 
   }
   .left { 
      border: 1px solid black; clear: left; 
   }
   .aqua { 
      float: left; margin: 0; background-color: aqua; color: #000; width: 20%; 
   }
   .pink { 
      float: left; margin: 0; background-color: pink; width: 20%; 
   }
   p { 
      width: 50%; 
   }
</style>
</head>
<body>
   <div class="main">
      <p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p class="left">This paragraph clears left.</p>
   </div>
</body>
</html>

设置Clear为right

下面的示例演示了使用清除样式 防止浮动元素溢出（clear:right） 属性：

<html>
<head>
<style>
   .main { 
      border: 1px solid black; padding: 10px; 
   }
   .right { 
      border: 1px solid black; clear: right; 
   }
   .aqua { 
      float: right; margin: 0; background-color: aqua; color: #000; width: 20%; 
   }
   .pink { 
      float: right; margin: 0; background-color: pink; width: 20%; 
   }
   p { 
      width: 50%; 
   }
</style>
</head>
<body>
   <div class="main">
      <p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p class="right">This paragraph clears right.</p>
   </div>
</body>
</html>

清除浮动效果

以下示例演示了如何使用clear:both属性实现清除浮动效果：

<html>
<head>
<style>
   .main { 
      border: 1px solid black; padding: 10px; 
   }
   .both { 
      border: 1px solid black; clear: both; 
   }
   .aqua{ 
      float: left; margin: 0; background-color: aqua; color: #000; width: 20%; 
   }
   .pink { 
      float: right; margin: 0; background-color: pink; width: 20%; 
   }
   p { 
      width: 45%; 
   }
</style>
</head>
<body>
   <div class="main">
      <p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
      <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p class="both">This paragraph clears both.</p>
   </div>
</body>
</html>