1. 什么是浮动
浮动就是使用 css当中的float 属性对一个元素进行设置，使其脱离文档流，移动到其父容器的左边或右边，可以达到图文环绕的效果。
- 浮动只能向左或向右浮动，因为只有float: left、float: right 和float: none这三个属性，并没有float: top和float: buttom。
- 浮动会尽量往左或右浮动，直到碰到了父容器的边缘。
| 属性 | 作用 |
|---|---|
| float: left | 使一个元素浮动在父元素内的左侧 |
| float: right | 使一个元素浮动在父元素内的右侧 |
| float: none | 元素不浮动 |
例子：
如果有三个固定大小的dvi，使其中的一个向右浮动。
例子1
2.清除浮动
看过上面的浮动介绍后，有人可能就会问了，已经设置好的浮动为什么要清除掉啊？请各位记住，浮动是有副作用的，而且这个清除浮动也并不是字面上的意思。
例子1：使一个元素向右浮动，此时浮动元素已经脱离文档流，所以他的父元素不能包含他。
浮动1
例子2：我们继续来看，如果父元素内的儿子元素都浮动呢？
浮动2
那么问题就来了，出现了父元素不能包裹子元素的现象。
为什么会这样呢？因为由于浮动元素脱离了文档流，所以不占用父元素文档流的位置，所以父元素无法包裹子元素，综上所述浮动是有副作用的，以上只是展示浮动简单的副作用，依据以上例子可以衍生出很多很多的副作用。会在以后遇到之后再更新此文。
- 清除浮动的方法：
1.在父容器的结尾加上一个空标签，标签是什么不重要，重要的是这个标签的默认类型必须是block ，并添加clear属性
clear属性总共有三种
| 属性 | 作用 |
|---|---|
| clear: left | 在左侧不许浮动元素 |
| clear: right | 在右侧不许浮动元素 |
| clear : both | 在左右两侧不许浮动元素 |
这种方法可以理解为，比如空标签是一个人，这个人说:我的左边和右边都不许出现浮动元素(clear : both),然后这个人会用手托起自己上面的浮动元素，所有浮动元素都会压在他身上，父元素也就不会塌陷了。
2.使用伪类元素为父容器结尾添加一个空标签。
content:"";
clear:both;
display: block;
}```
此方法和上面的原理是一样的。