CSS clear 语法
在 CSS 中，clear 属性用于清除元素的浮动行为。
语法：
clear: 关键字;说明：
clear 的常用取值有 4 种，如下表所示。
| 取值 | 说明 |
|---|---|
| none（默认值） | 不清除浮动 |
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 清除所有浮动 |
对于 clear 属性，小伙伴们要清楚以下几点。
- clear 属性会增加元素的顶部外边距来向下移动元素，以确保其边界位于所有指定方向的浮动元素下方。
- clear: both; 是最常用的清除浮动的方式，用于确保元素从一个新的行开始，不受之前任何浮动元素的影响。
- 清除浮动常用于解决浮动元素导致父容器高度坍塌的问题（即父容器高度无法包含浮动子元素）。常用的解决方法是在父容器上应用 BFC（例如设置 overflow: hidden; 或 display: flow-root;）或在浮动元素后添加一个设置了 clear: both; 的元素。
注意: clear 属性只对块级元素或生成的内容（使用 :before 或 :after 伪元素）生效。行内元素会忽略 clear 属性。
CSS clear 摘要
| 属于 | CSS 清除浮动 |
|---|---|
| 使用频率 | 中（传统布局） |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
| 相关属性 | float |
CSS clear 示例
接下来，我们通过一个简单的例子来讲解一下 CSS clear 属性是如何使用的。
示例 1：没有使用 clear 清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
width: 300px;
background-color:teal;
border: 1px solid silver;
}
#son1, #son2{
padding: 10px;
margin: 20px;
}
#son1 {
background-color: hotpink;
float: left;
}
#son2 {
background-color: orange;
float: right;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
上面是使用了 float 属性之后，没有清除浮动的效果，此时可以看到父元素出现高度塌陷的问题。
示例 2：使用 clear 属性清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
width: 300px;
background-color:teal;
border: 1px solid silver;
}
#son1, #son2{
padding: 10px;
margin: 20px;
}
#son1 {
background-color: hotpink;
float: left;
}
#son2 {
background-color: orange;
float: right;
}
/* 关键代码，清除浮动 */
.clear { clear: both; }
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div class="clear"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义 clear: both 来清除浮动。说白了，前面小弟干了太多坏事，后面得大哥出面才能解决。
在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。
注意: clear 属性不是应用于浮动元素本身，而是应用于浮动元素后面的空元素。
