1. 浮动
浮动：使元素浮起来，脱离文档流，从而使盒子能够灵活的移动。
浮动的属性：
float 属性设置元素的浮动
可选值：
none 元素不浮动，默认在文档流中排列（默认值）
left 元素向左移动
right 元素向右移动
浮动的特点：
-
浮动元素会脱离文档流
- 脱离文档流的控制，从而使盒子更灵活的移动
- 浮动元素不会保留原来的位置
-
浮动元素将具有行内块元素的特点
- 无论是块元素还是行内元素，都可以设置浮动，浮动后将具有行内块元素的特点
- 块元素设置浮动后，大小根据内容决定
- 行内元素设置浮动，不需要通过display转换为块，就可以设置宽度和高度
-
浮动的盒子会一行显示并且顶部对齐
- 多个盒子设置了浮动，他们会一行显示并且顶部对齐
- 浮动元素互相贴靠在一起，没有缝隙，如果父元素宽度不能容纳这些盒子
多出的盒子会另起一行对齐显示
浮动的应用：
1. 浮动元素目的就是为了让盒子横向（水平）排列，完成水平方向的布局
2. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
浮动的注意：
1. 浮动元素无法超越文档流的块元素
2. 浮动元素只会影响后面文档流中的元素，不会影响前面文档流的盒子
示例如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>floating</title>div {width: 200px;height: 200px;}.box1 {background-color: #c7edcc;}.box2 {background-color: #fde6e0;float: left;}.box3 {background-color: #dce2f1;float: left;}span {background-color: yellowgreen;width: 100px;height: 100px;float: left;}
</head><body><div class="box1"></div><div class="box2">我是div</div><div class="box3"></div><span>我是span1</span><span>我是span2</span><span>我是span3</span><span>我是span4</span>
</body></html>
未安装或无效。请确保选择受支持的 PlatformToolset 值解决办法)
--以太网协议,DNS)
 -自定义组件库)
