CSS - 清除修复

上一页
下一页

Clearfix 是一种技术，用于确保容器正确包围并在其中包含浮动元素。它通过向容器添加一个空元素来防止布局问题，该元素会清除左右浮动，从而允许容器扩展并保持其预期的布局。

Clearfix 有助于防止容器倒塌、高度不平坦、内容物重叠、对齐不一致等问题。

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

如上所述，CSS clearfix 修复了所需元素的溢出元素。为此，可以处理以下三个属性：

下图演示了 clearfix 布局以供参考：

padding structure

CSS Clearfix - 带有溢出和浮动属性

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


<html>
<head>
<style>
	 	 div {
	 	 	 	 border: 2px solid #f0610e;
	 	 	 	 padding: 5px;
	 	 	 	 background-color: #86f00e;
	 	 }
	 	 .tutimg {
	 	 	 	 float: right;
	 	 	 	 border: 3px solid #f0610e;
	 	 }
</style>
</head>
<body>
	 	 <h2>Without clearfix</h2>
	 	 <div>
	 	 	 	 <img class="tutimg" src="images/tutimg.png" width="200" height="200">
	 	 	 	 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.
	 	 </div>
</body>
</html>

CSS Clearfix - 带溢出属性

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


<html>
<head>
<style>
	 	 div {
	 	 	 	 border: 2px solid #f0610e;
	 	 	 	 padding: 5px;
	 	 	 	 background-color: #86f00e;
	 	 }
	 	 .tutimg {
	 	 	 	 float: right;
	 	 	 	 border: 3px solid #f0610e;
	 	 }
	 	 .custom-clearfix {
	 	 	 	 overflow: auto;
	 	 }
</style>
</head>
<body>
	 	 <h2>With clearfix</h2>
	 	 <div class="custom-clearfix">
	 	 	 	 <img class="tutimg" src="images/tutimg.png" width="200" height="200">
	 	 	 	 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.
	 	 </div>
</body>
</html>

 

 

CSS Clearfix - 带 height 属性

您还可以通过设置类似于浮动图像高度的 <div> 元素的高度来实现 clearfix。


<html>
<head>
<style>
	 	 div {
	 	 	 	 border: 2px solid #f0610e;
	 	 	 	 padding: 10px;
	 	 	 	 height: 120px;
	 	 	 	 background-color: #86f00e;
	 	 }
	 	 .tutimg {
	 	 	 	 float: right;
	 	 	 	 border: 3px solid #f0610e;
	 	 }
</style>
</head>
<body>
	 	 <div>
	 	 	 	 <img class="tutimg" src="images/tutimg.png" width="120" height="120">
	 	 	 	 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.
	 	 </div>
</body>
</html>

CCS Clear 属性

clear CSS 属性通过将元素移动到浮点概念上来影响浮点概念，而不是让它们向上移动以占用可用空间。clear 属性适用于浮动元素和非浮动元素。

可能的值为：

  • none： 是一个关键字，指示元素不会向下移动以清除过去的浮动元素。
  • left： 是一个关键字，指示元素向下移动以清除过去的左侧浮点数。
  • right： 是一个关键字，指示元素向下移动以清除过去的右浮点数。
  • both： 是一个关键字，指示元素向下移动以清除左侧和右侧浮点数。
  • inline-start:： 是一个关键字，指示元素向下移动以清除其包含块的起始侧的浮点数，即在 ltr 脚本上左浮点数，在 rtl 脚本上右浮点数。
  • inline-end： 是一个关键字，指示元素向下移动以清除其包含块的末端侧的浮点数，即在 ltr 脚本上右边浮点，在 rtl 脚本上左浮点。

CSS clear - left 值

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


<html>
<head>
<style>
	 	 	 .mainbody{
	 	 	 	 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="mainbody">
	 	 	 <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. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
	 	 </p>
	 <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	 <p class="left">This paragraph clears left.</p>
</div>
</body>
</html>

CSS clear - right 值

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


<html>
<head>
<style>
	 	 .mainbody{
	 	 	 border: 1px solid black;
	 	 	 padding: 10px;
	 	 }
	 	 .right {
	 	 	 border: 1px solid black;
	 	 	 clear: right;
	 	 }
	 	 .aqua{
	 	 	 float: right;
	 	 	 margin: 0;
	 	 	 background-color: black;
	 	 	 color: #fff;
	 	 	 width: 20%;
	 	 }
	 	 .pink{
	 	 	 float: right;
	 	 	 margin: 0;
	 	 	 background-color: pink;
	 	 	 width: 20%;
	 	 }
	 	 p {
	 	 	 width: 50%;
	 	 }
	 </style>
</head>
<body>
	 	 <div class="mainbody">
	 	 	 <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. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
	 	 </p>
	 <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	 <p class="right">This paragraph clears right.</p>
</div>
</body>
</html>

CSS clear - both 值

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


<html>
<head>
<style>
	 	 .mainbody{
	 	 	 border: 1px solid black;
	 	 	 padding: 10px;
	 	 }
	 	 .both {
	 	 	 border: 1px solid black;
	 	 	 clear: both;
	 	 }
	 	 .aqua{
	 	 	 float: left;
	 	 	 margin: 0;
	 	 	 background-color: black;
	 	 	 color: #fff;
	 	 	 width: 20%;
	 	 }
	 	 .pink {
	 	 	 float: right;
	 	 	 margin: 0;
	 	 	 background-color: pink;
	 	 	 width: 20%;
	 	 }
	 	 p {
	 	 	 width: 45%;
	 	 }
	 </style>
</head>
<body>
	 	 <div class="mainbody">
	 	 	 <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. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
	 	 </p>
	 <p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	 <p class="both">This paragraph clears both.</p>
</div>
</body>
</html>
本页
上一页
下一页