Css 简明教程
CSS - Clearfix
Clearfix 是确保容器在内部正确包围和包含浮动元素的一种技术。通过向容器中添加一个空元素来防止布局问题，该元素清除左右浮动，允许容器扩展并保持其预期布局。
Clearfix is a technique to ensure that a container properly encloses and contains floated elements within it. It prevents layout issues by adding an empty element to the container, which clears both left and right floats, allowing the container to expand and maintain its intended layout.
Clearfix 帮助防止容器坍塌、高度不均匀、内容重叠、对齐不一致等问题。
Clearfix helps to prevent the problems like container collapse, uneven heights, overlapping content, inconsistent alignment.
本章将探讨 clearfix 技术如何确保容器元素正确包含其浮动子元素。
This chapter will explore, how the clearfix technique ensures that container elements properly contains its floated child elements.
如上所述，CSS clearfix 修复了从所需元素中的溢出元素。以下三个属性可以针对此进行操作：
As mentioned above ,the CSS clearfix fixes the overflow elements from the desired element. The following three properties can be worked upon for this:
以下图表演示了 clearfix 布局以为参考：
The following diagram demonstrates the clearfix layout for reference:
CSS Clearfix - With overflow & float Property
让我们看一个示例，其中一个图像比其容器的高度大，导致图像超出其容器的边界并可能破坏布局。
Let us see an example where an image is larger than its container’s height, causing the image to extend beyond the boundaries of its container and potentially disrupting the layout.
<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; 属性设置为相应元素，确保图像完全包含在容器中。
To resolve this overflow, we can set overflow: auto; property to the corresponding element, ensuring that the image is fully contained within the container.
<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> 元素的高度为与浮动图片的高度类似来实现清除浮动。
You can also acheive clearfix by setting the height of <div> element similar to the height of the floated image.
<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 属性适用于浮动和非浮动元素。
The clear CSS property affects the float concept by moving elements past it instead of having them move up to take the space available. The clear property applies to floating and non-floating elements.
可能的值为：
Possible values are:
-
*none: *Is a keyword indicating that the element is not moved down to clear past floating elements.
-
*left: *Is a keyword indicating that the element is moved down to clear past left floats.
-
*right: *Is a keyword indicating that the element is moved down to clear past right floats.
-
*both: *Is a keyword indicating that the element is moved down to clear past both left and right floats.
-
*inline-start: *Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.
-
*inline-end: *Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.
CSS clear - left Value
以下示例演示了使用 clear:left 属性清除浮动：
Following example demonstrates clearfix using clear:left property:
<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 属性清除浮动：
Following example demonstrates clearfix using clear:right property:
<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 属性清除浮动：
Following example demonstrates clearfix using clear:both property:
<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>