上查看所有课程
CSS 的 clear 属性控制元素相对于浮动元素的位置行为。它允许关闭文本环绕，并将元素移到浮动元素下方。
让我们看一个例子。
p {
float: right;
}
p.second {
clear: right;
}浏览器输出
在此，clear 属性会将相邻的段落移到浮动段落下方，并防止文本环绕浮动段落。
CSS clear 语法
clear 属性的语法如下：
clear: none | left | right | both | initial | inherit;这里，
none：允许元素浮动（默认值）left：将元素移到任何左浮动元素下方right：将元素移到任何右浮动元素下方both：将元素移到任何浮动元素下方（包括左浮动和右浮动）initial：将属性值设置为默认值inherit：继承其父元素的属性值。
注意：clear 属性同时适用于浮动和非浮动元素。
CSS clear none 示例
clear 属性的 none 值是默认值，允许元素浮动。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div>
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita. With his magical
gadgets and clever solutions, Doraemon always manages to turn
Nobita's troubles into exciting adventures. Whether it's
rescuing friends, solving problems, or teaching important life
lessons, Doraemon's kind heart and unwavering friendship make
him a true hero.
</p>
</div>
</body>
</html>img {
/* moves the image to the right of its parent */
float: right;
width: 100px;
height: 100px;
}
p {
/* default value; makes no change */
clear: none;
}
/* styles the div element */
div {
border: 2px solid black;
}浏览器输出
在上面的示例中，clear 属性的 none（默认值）仍然允许段落环绕浮动的图像元素。
CSS clear left 示例
clear 属性值为 left 时，会清除前面浮动元素左侧的空间，使其定位在新行的下方。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div>
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img {
/* moves the image to the left of its parent */
float: left;
width: 100px;
height: 100px;
}
p {
/* clears the left side and moves into a new line */
clear: left;
}
/* styles the div element */
div {
border: 2px solid black;
}浏览器输出
在上面的示例中，应用于 p 元素的 clear: left 清除了左侧空间，并将其移至新行。
CSS clear right 示例
clear 属性值为 right 时，会清除前面浮动元素右侧的空间，使其定位在新行的下方。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div>
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img {
/* moves the image to the right of its parent */
float: right;
width: 100px;
height: 100px;
}
p {
/* clears the left side and moves into a new line */
clear: right;
}
/* styles the div element */
div {
border: 2px solid black;
}浏览器输出
在上面的示例中，应用于 p 元素的 clear: right 清除了右侧空间，并将其移至新行。
CSS float 的问题
CSS float 属性主要存在以下两个问题：
- 当所有内容都浮动时，父级或容器框会完全塌陷。
- 如果浮动元素的高度大于父元素，则浮动元素会溢出父元素。
让我们分别看一下。
CSS 塌陷问题
当所有内容都浮动时，父元素或容器框会发生塌陷。浮动元素会脱离文档正常流，导致父框失去尺寸。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div>
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo" />
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img,
p {
/* moves both image and p to the right of its parent */
float: right;
border: 2px solid orange;
}
img {
width: 100px;
height: 100px;
}
/* styles the div element */
div {
padding: 12px;
border: 2px solid black;
background-color: greenyellow;
}浏览器输出
在上面的示例中，p 和 img 元素都被设置为 float: right，导致父级 div 发生塌陷。
div 中可见的空间是由于 padding 和 border 的高度造成的。
CSS 溢出问题
如果浮动元素的高度大于父元素的高度，它会溢出父元素或容器元素。
浮动元素的内容仍然会显示在父元素外部，导致与页面上的其他元素重叠。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div>
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img {
/* moves the image to the right of its parent */
float: right;
width: 170px;
height: 170px;
border: 2px solid orange;
}
/* styles the div element */
div {
border: 2px solid black;
}浏览器输出
在上面的示例中，img 的高度大于父级 div 元素的高度，导致它溢出了父元素。
可以使用空 div 方法、CSS overflow 属性和 Clearfix 技巧来解决父元素塌陷和溢出的问题。
让我们看看其中的每一种。
使用空 <div> 元素
空 <div> 元素通常用于解决塌陷和溢出问题。
空 <div> 元素放置在浮动元素之后，并应用了 clear: both 样式。
让我们看一个溢出问题的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div class="parent">
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
<div class="empty"></div>
</div>
</body>
</html>img {
/* moves the image to the right of its parent */
float: right;
width: 170px;
height: 170px;
border: 2px solid orange;
}
/* styles for empty div element; solves the overflow issue */
div.empty {
clear: both;
}
/* styles the div element */
div.parent {
border: 2px solid black;
}浏览器输出
在上面的示例中，应用了 clear: both 的空 div 元素使父级 div 元素扩展以适应图像。
使用 CSS overflow 属性
在父元素中使用值为 auto 或 hidden 的 CSS overflow 属性，可以解决塌陷和溢出问题。父元素会扩展以包含浮动元素。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div class="parent">
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img,
p {
/* moves both image and p to the right of its parent */
float: right;
border: 2px solid orange;
}
img {
width: 100px;
height: 100px;
}
div.parent {
/* expands the div to contain the floating elements */
overflow: auto;
border: 2px solid black;
}浏览器输出
在上面的示例中，overflow 属性扩展了父级 div 元素以同时包含浮动的 p 和 img 元素，从而防止了父元素的塌陷。
Clearfix 技巧
clearfix 方法也常用于防止塌陷和溢出问题。在此方法中，在父元素上使用 CSS 伪选择器 (::after) 来清除浮动。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS clear</title>
</head>
<body>
<div class="clearfix">
<img
src="https://freepngimg.com/thumb/doraemon/35051-9-doraemon-transparent-thumb.png"
alt="Doraemon Photo"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
</div>
</body>
</html>img,
p {
/* moves both image and p to the right of its parent */
float: right;
border: 2px solid orange;
}
/* expands the div element having clearfix class to prevent collapsing */
.clearfix::after {
content: "";
display: block;
clear: both;
}
img {
width: 100px;
height: 100px;
}
/* styles the div element */
div {
border: 2px solid black;
}浏览器输出
在上面的示例中，clearfix 方法防止了父级 div 元素塌陷，并同时包含了浮动的 p 和 img 元素。