开发者学堂课程【前端开发CSS基础：CSS 浮动 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4266
CSS 浮动
内容介绍：
一、浮动简介
二、clear 属性：
三、float 实例演示
四、clear 实例演示
一、浮动简介
float：属性可用的值：
left：元素向左浮动
right：元素向右移动
none：元素不浮动
inherit：从父级继承浮动属性
注意：float 在绝对定位和 display 为 none 时不生效。
浮动特点：当把元素设置成浮动的时候，它本身是脱离文档流，不占位
在代码中详细讲解
二、clear 属性：
去掉浮动属性（包括继承来的属性）
clear 属性位：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来 clear 的
三、float 实例演示
（1）新建
先创建一个新的 HTML 文件，以 float 命名
需要先创建 div1，并命名一个名为 one 的类名，内容为我是 div1
<div class=”one”>我是div1</div>
创建 div2，并命名一个名为 two 的类名，内容为我是 div2
<div class=”two”>我是div2</div>
创建 div3，并命名一个名为 three 的类名，内容为我是 div3
<div class=”three”>我是div3</div>
样式的描写
先给 div 增加一个宽和高均为 100px 的样式
div{
width:100px;
height:100px;
}
再给每一个 div 附上颜色的要求
background-color: aquamarine;
.two{
background-color: pink;
}
.three{
background-color: plum;
}
综上结合后代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
}
. one{
background -color: aquamarine ;
}
. two{
background -color:pink;
}
. three{
background -color:plum;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</body>
</html>
运行结果如下图：
三个垂直排列的 div，每个 div 都是块级元素，占有一行。
（2）添加一个容器 container
<div class=”container”>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</div>
设置容器的样式
.container{
width: 600px;
height: 600px;
background-color: gray;
}
此时代码更新为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
}
. one{
background -color: aquamarine ;
}
. two{
background -color:pink;
}
. three{
background -color:plum;
}
container{
width: 600px;
height: 600px;
background-color: gray;
}
</style>
</head>
<body>
<div class=”container”>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</div>
</body>
</html>
改代码运行效果如图：
效果中灰色的 div 承载了三个小的 div
（3）给第一个 div 加上向左浮动的条件：
float：left
整体代码变为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
}
. one{
float：left
background -color: aquamarine ;
}
. two{
background -color:pink;
}
. three{
background -color:plum;
}
container{
width: 600px;
height: 600px;
background-color: gray;
}
</style>
</head>
<body>
<div class=”container”>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</div>
</body>
</html>
增加要求之后，效果如下;
此时只能观察到两个 div，那是因为第二个 div 在第一个的下方，需要将第二个的像素进行修改。修改内容如下：
two{
width：150px；
background -color:pink;
}
修改后效果变为;
因为在之前的讲述中，再给元素设置 float 属性时，他是脱离文档流的，可以理解为，它现在漂浮在浏览器的上方不占位，那么原来的 div1 的位置以及 div2 就上去了
（4）给 div2 加上一个右侧浮动
float：right；
此时整体代码变为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
}
. one{
float：left
background -color: aquamarine ;
}
. two{
float：right；
width：150px；
background -color:pink;
<div class=”container”>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</div>
</body>
</html>
加上右浮动后代码结果如下：
可以看到即使 div3 被覆盖了，但每一个 div 所包含的内容是没有覆盖的
（5）使三个 div 水平排列
将三个 div 同时向左或向右浮动，本次演示以向左浮动为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
</style>
</head>
<body>
<div class=”container”>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
<div class="three">我是div3</div>
</div>
</body>
</html>
刷新后结果变为：
可以观察到三个 div 均已经水平排列
快速水平排列目前有三种方式
1. 变为 inline-block，用成列名元素。
2. 运用制作盒
3. 使用本节课讲述的 float用法
（6）在主容器中加入内容
内容为：hello
将主容器的宽度变为 300px；
再刷新后得到以下效果：
可以看到 div3 被挤下来了，因为容器的宽度不足以承载 div3，所以显示在第二行。
如果将主容器的内容变长将 hello 变成 hello world
再刷新后变成以下结果：
此时 hello world 依旧在右侧；
再将主容器的 hello world，变为一句话 helloworld；
此时原来的位置已经无法在承载 helloworld 的长度，所以他被挤到如图的位置上去。
再将 div1 的高度变为 150px；
. one{
height：150px；
float：left
background -color: aquamarine ;
}
结果如下：
可以观察到 div3的位置发生了变化
四、clear 实例演示
（1）新建
新建一个 HTML 文件，以 clear 命名。
先写一个 div，类名为 text1 ,内容为我将出现在屏幕右方，
<div class="text1">我将出现在屏幕右方</div>
先写一个 div，类名为 text2 ,内容为注意我出现的位置，
<div class="text2">注意我出现的位置</div>
代码整体为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.text1{
background -color: antiquewhite;
}
.text2{
background -color:burlywood;]I
}
<div class="text1">我将出现在屏幕右方</div>
<div class="text2">注意我出现的位置</div>
</body>
</html>
执行代码得到以下结果：
（2）给第一个 div 一个 float 属性
float: right;
整体代码变为如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
<div class="text1">我将出现在屏幕右方</div>
<div class="text2">注意我出现的位置</div>
</body>
</html>
此时得到的效果示意图如下：
可以看到第一个 div 的内容不占位，由第二个占据第一个位置，此时原来第一个 div 的位置就变到了右侧
（3）给 div2 一个 clear 属性
clear: right;
整体代码变为如下：
<!DOCTYPE html>
<html lang="en">
<head>
}
.text2{
clear：right；
background -color:burlywood;]I
}
</style>
</head>
<body>
<div class="text1">我将出现在屏幕右方</div>
<div class="text2">注意我出现的位置</div>
</body>
</html>
此时得到的效果示意图如下：
此时去掉了浮动的效果，独自占一行。
（4）注意：float 在绝对定位和 display 为 none 时不生效。
display=none 意思使隐藏对象且不会被隐藏的对象保持其空间，就是让对象隐藏彻底消失掉且不会保留原来的物理位置
演示：
将原来 text2 的 clear 内容删掉， 并在 text1 中加入position：absolute；
整体代码变为如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.text1{
float: right;
position：absolute；
background -color: antiquewhite;
}
.text2{
background -color:burlywood;]I
}
</style>
</head>
<body>
<div class="text1">我将出现在屏幕右方</div>
<div class="text2">注意我出现的位置</div>
</body>
</html>
此时得到的效果示意图如下：
结果并未变化，就是没有生效
但将 display 设置为 none ；此时运行后的结果就将完全看不到 div 的效果，所以就是将第一个 div 的效果彻底隐藏了。
