css浮动的属性主要包含float和clear两个核心属性，这两个属性配合可以实现多种常见的页面布局效果，同时也需要掌握对应的使用规则来规避布局异常问题。
float属性详解
float属性用于指定元素是否浮动以及如何浮动，它会影响元素在文档流中的位置，同时周围的内容会环绕浮动元素排列。该属性的可选值有以下几种：
- none：默认值，元素不浮动，按照正常文档流排列。
- left：元素向左浮动，脱离正常文档流，向左停靠到父元素的边缘或者另一个浮动元素的边缘。
- right：元素向右浮动，脱离正常文档流，向右停靠到父元素的边缘或者另一个浮动元素的边缘。
- inherit：从父元素继承float属性的值。
下面是一个简单的float属性使用示例，实现两个div并排排列的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
border: 1px solid #ccc;
padding: 10px;
}
.left-box {
width: 200px;
height: 150px;
background-color: #f0f0f0;
float: left; /* 向左浮动 */
}
.right-box {
width: 250px;
height: 150px;
background-color: #e0e0e0;
float: left; /* 向左浮动，紧跟在第一个浮动元素右侧 */
}
</style>
</head>
<body>
<div class="container">
<div class="left-box">左侧浮动元素</div>
<div class="right-box">右侧浮动元素</div>
</div>
</body>
</html>
clear属性详解
clear属性用于指定元素的哪一侧不允许存在浮动元素，主要用来解决浮动带来的父元素高度塌陷、后续元素排版异常等问题。该属性的可选值如下：
- none：默认值，允许两侧都存在浮动元素。
- left：左侧不允许存在浮动元素，元素会排列在左侧浮动元素的下方。
- right：右侧不允许存在浮动元素，元素会排列在右侧浮动元素的下方。
- both：左右两侧都不允许存在浮动元素，元素会排列在所有浮动元素的下方。
- inherit：从父元素继承clear属性的值。
下面的示例演示了使用clear属性清除浮动影响的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
border: 1px solid #ccc;
padding: 10px;
}
.float-box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
float: left;
}
.normal-box {
height: 120px;
background-color: #e0e0e0;
clear: both; /* 清除两侧浮动，排列在浮动元素下方 */
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">浮动元素</div>
<div class="normal-box">被清除浮动影响的元素</div>
</div>
</body>
</html>
两个属性的配合使用
在实际布局中，float和clear属性通常会配合使用，比如实现图文环绕效果时，用float设置图片浮动，用clear控制后续段落的排版；或者解决父元素高度塌陷问题时，在父元素内部最后添加一个带有clear:both属性的空元素，也可以使用伪元素after来替代空元素，示例代码如下：
/* 使用伪元素清除浮动，避免父元素高度塌陷 */
.container::after {
content: "";
display: block;
clear: both;
}
属性取值总结
下面是float和clear属性的取值对比表，方便快速查阅：
| 属性名 | 可选取值 | 作用说明 |
|---|---|---|
| float | none, left, right, inherit | 控制元素浮动方向和是否浮动 |
| clear | none, left, right, both, inherit | 控制元素哪一侧不允许存在浮动元素 |
使用浮动属性时需要注意，浮动元素会脱离正常文档流，可能导致父元素无法感知浮动元素的高度，出现高度塌陷问题，此时需要配合clear属性或者触发父元素BFC等方式解决。同时浮动适合实现简单的多列布局或者图文环绕效果，复杂的布局场景更推荐使用flex或者grid布局方案。