1、目的：使男标签可以并排显示，弥补流式布局的不足。
2、格式：float：left-->左浮动 float：right -->右浮动 float:none -->不浮动
3、特点：
- 初衷是为了实现字围效果，后来发现可以是男标签并排显示。
- 父元素内部的一个元素浮动了，那么他就脱离了标准文档流，后面的元素就会像上排。
- 浮动并没有完全脱离标准文档流，其内部还是遵循保准文档流。
- 如果多个元素浮动，那么他们就会并排显示，若他们都是同一方向浮动，则会紧紧贴在一起。
- 如果一个元素浮动了，其就会先向上移动，直到贴靠到父元素的边界。接着，如果是左浮动，就向左移动，直到移动到父元素的左边界；如果是向右浮动，就向右移动，直接移动到父元素的右边界。
- 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。（解决办法在后面讨论）
- 如果元素浮动了，它也会对后面的兄弟造成元素影响。（解决办法在后面讨论）
- 当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性。
- 如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。
- 如果父元素也浮动了，那么就不会出现高度塌陷了。
- 如果有左浮动，又有右浮动，那么需要把右浮动的元素写在左左浮动的前面，使其对齐。
- 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
4、应用：
- 实现左右布局 小导航 多个规则盒子水平排列（行内块）
5、元素浮动造成的影响
- 对父元素造成的影响：高度塌陷。
-
- 解决方法：
-
- 1）、显示加高度（加高法）用法简单，但是基本不用。因为大部分情况情况下，父元素的高度是需要子元素撑起来
-
- 2）、overflow:hidden : 用法简单。使用overflow:hidden 会使父元素的高度会随着子元素的高度变化而变化。但是其本职工作是用来处理溢出的。在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
-
- 3）、clear:both 在所有子元素后面加一个空的div，在这个div上面加clear:both ---> 内嵌法 优点：clear:both专业清除浮动的 缺点：多写一个代码
- 对后面兄弟元素造成的影响
-
- 兄弟元素会向上移动
-
- 解决：在受影响的元素上面的加 clear:both
5、项目中最常用清除浮动的方法： 利用伪元素 after说白了，就是写一个清除浮动的类，如下：
.clear:after{content="";
display:block;
clear:both;
height:0;
overflow:hidden;}
6、如果不想使其浮动可以对标签进行变性操作
display: 显示，展示
变性手术
display:block 让一个标签变成男标签（块级元素）
display:inline 让一个标签变成女标签（行内元素）
display:inline-block 让一个标签变成不男不女标签（行内块元素）
display:none 可以让一个元素不显示出来