Css 简明教程
CSS - Clearfix
Clearfix 是确保容器在内部正确包围和包含浮动元素的一种技术。通过向容器中添加一个空元素来防止布局问题，该元素清除左右浮动，允许容器扩展并保持其预期布局。
Clearfix 帮助防止容器坍塌、高度不均匀、内容重叠、对齐不一致等问题。
本章将探讨 clearfix 技术如何确保容器元素正确包含其浮动子元素。
如上所述，CSS clearfix 修复了从所需元素中的溢出元素。以下三个属性可以针对此进行操作：
以下图表演示了 clearfix 布局以为参考：
CSS Clearfix - With overflow & float Property
让我们看一个示例，其中一个图像比其容器的高度大，导致图像超出其容器的边界并可能破坏布局。
<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 - With overflow Property
为了解决此溢出，我们可以将 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 - With height Property
你还可以通过设置 <div> 元素的高度为与浮动图片的高度类似来实现清除浮动。
<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 Property
clear CSS 属性通过将元素移动到其后面来影响 float 概念，而不是让元素向上移动以占用可用空间。 clear 属性适用于浮动和非浮动元素。
可能的值为：
-
*none :*是一个关键字，表示元素不会下降以清除浮动元素。
-
*left:*是一个关键字，表示元素会下降以清除左侧浮动。
-
*right:*是一个关键字，表示元素会下降以清除右侧浮动。
-
*both:*是一个关键字，表示元素会下降以清除左右浮动。
-
*inline-start:*是一个关键字，表示元素会下降以清除其包含块开始侧的浮动，即从左到右脚本中的左侧浮动以及从右到左脚本中的右侧浮动。
-
*inline-end:*是一个关键字，表示元素会下降以清除其包含块末尾侧的浮动，即从左到右脚本中的右侧浮动以及从右到左脚本中的左侧浮动。
CSS clear - left Value
以下示例演示了使用 clear:left 属性清除浮动：
<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 Value
以下示例演示了使用 clear:right 属性清除浮动：
<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 Value
以下示例演示了使用 clear:both 属性清除浮动：
<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>