开发者学堂课程【零基础学前端 HTML+CSS ：浮动与清除浮动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5143
浮动与清除浮动
内容介绍
一．盒子的三种定位形式
二．浮动
三．浮动的清除
一．盒子的三种定位形式
1.内容介绍
在标准流下的定位
在浮动属性下的定位
在定位属性下的定位
除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在 HTML 中的位置决定。
二． 浮动
1.内容介绍
（1）在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行;而在竖直方向和其他元素依次排列不能并排，如图所示。使用“浮动”方式后，这种排列方式就会发生改变。
（2）CSS 中有一个 float 属性，默认值为 none，也就是标准流通常的情况，如果将 float 属性的值设为 left 或 right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。
2.补充解释
平时写的代码是二维的行与列，排版不是很方便，横行不可以叠加，于是出现了浮动属性。盒子的浮动主要是排版使用，我们默认的 DIV table 标签做出来的内容都是2D。默认值 none 是不浮动。
如果将方块进行横排排版，大方块儿内嵌套小方块儿排版时，将会用到float的属性。
3.示例代码
<!DOCTYPE html><html>
<html>
<head lang="en">
(meta charset="UTF-8">
<title></title>
<style>
#f1
{
width:200px;
height:200px;
background-color: red;
float: left;
}
#f2{
width:200px;
height: 200px;
background-color: green;
float: left;
}
#f3{
width:300px;
height: 300px;
background-color: blue;
float: right;
}
#f4{
width:1000px;
height:500px;
background-color: #c0c0c0；
}
</style>
</head>
<body>
<div id="f1">浮动1</div>
<div id="f2">浮动2</div>
<div id="f3">浮动3</div>
(div id="f4">浮动4</div>
</body>
</html>
第一步先写入三个浮动板块分别增加 id：f1，f2，f3
第二步添加f1（红色），f2（绿色），f3（蓝色）的属性
第三步将f2标签添加 float: left 可以看到 f2在f3的上面
第四步将f3标签添加 float: left 可以看到 f3在f2的右面
第五步将f1标签添加 float: left 可以看到f1，f2，f3在一排但其实是三维的排列
第六步添加f4（灰色）且都大于其他三个板块可以看到f4在最下层
第七步f3标签添加float: right 可以看到f3在最右面，因为f3被设定为靠右进行的浮动
三．浮动的清除
1.浮动的清除
clear 是清除浮动属性，它的取值有 left right both 和 none(默认值)，如果设置盒子的清除浮动属性 clear 值为 left 或 right，表示该盒子的左边或右边不允许有浮动的对象。
值设置为 both 则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示。
2.操作示例
将板块二中的代码进行修改
第一步改为f1， f2，f3有浮动去掉f4可以看到f3被覆盖
第二步添加 clear 属性可以看到f3没有被覆盖，即浮动被清除了
3.补充解释
Clear 即清除浮动的影响，可以设置浮动的清除，来消除浮动对于下面标签的影响，可以设置左浮动清除 left 或右浮动清除 right，或两侧清除 Both 和 none 不清除
