一，浮动的概念
key：float；
value： left 、 right；
作用：让元素脱离标准流，同一级单独浮动元素可以并在一排显示；
二，浮动的性质
浮动脱离了标准流的限制，具有行内块元素二象性可以设置宽高还可以并成一排；
而且不像行内块元素一样，有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开；
三，浮动元素的依次贴边
1，依次往父盒子左边贴边
浮动依次贴边且不会出现空白折叠现象；
2，当父盒子宽度不够容纳四个子盒子
当父盒子宽度不够四个子盒子排成一排时，子盒子4会往下掉，且往父盒子左边贴边，但由于子盒子2挡住，所以它只能停留在这个位置；
当父盒子宽度不够四个子盒子排成一排时，子盒子4会往下掉，且往父盒子左边贴边，但由于子盒子2，3都没有挡住它，所以它停留在这个位置；
当父盒子宽度不够四个子盒子排成一排时，子盒子4会往下掉，且往父盒子左边贴边，2盒子有凹陷空隙但我们可以发现浮盒子并不会出现钻空现象，所以它停留在这个位置；
当父盒子宽度不够四个子盒子排成一排时，子盒子4会往下掉，且往父盒子左边贴边，可以发现子盒子4掉到下面的位置子盒子的宽度比父盒子大所以它会溢出显示；
3，依次贴边应用
案例：利用浮动依次贴边性质，用列表结构模拟平均分布的表格布局结构；
常用有上面的平均分布表格效果、导航栏效果、常见的电商或企业网站的布局；
浮动没有垂直方向margin塌陷
4，浮动问题
1,当给子盒子设置浮动，子盒子由于脱离标准文档流所以撑不开父盒子的高度；
2，再给一组同样的父子盒子，父盒子没有高度按照标准流元素按原先； 如果浮动子元素足够高，有可能会影响后面浮动元素的贴边；
四，清除浮动
clear属性
作用：清除标签元素自身受到的前面的浮动元素的影响；
| value | 说明 |
|---|---|
| left | 清除左浮动带来影响 |
| right | 清除右浮动带来影响 |
| both | 清除所有浮动带来的影响 |
清除浮动方法
1，伪类清除浮动 本质是使用伪类的方法利用css代码写一堵内墙 给父盒子一个clearfix；
.clearfix::after {
content: "1";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
2，给父级添加元素属性overflow：hidden；
3，给父级添加元素属性display：inline-block；
用内墙法、触发bfc等方法都可以达到清除浮动的效果；
五，浮动应用
三栏布局
三栏布局中要给要让左右盒子要浮动的先写在前面再写中间的盒子，也就是左右中的html盒子写法，因为一旦写成左中右我们会发现浮动的问题，右边的盒子由于中间的盒子是块级元素，所以3盒子一旦浮动会被2块级盒子挡到无法上去；
左右两边的浮动盒子挡住了我们的2盒子的内容，所以我们可以给2盒子设置一个padding为左右两边盒子的宽度；
六，伪类选择器
我们以a标签为例写一下伪类选择器的样式
访问前：
a:link {
color: red;
}
访问后：
a:visited {
color: yellow;
}
鼠标悬浮状态：
a:hover {
color: skyblue;
}
鼠标点击时：
a:active {
color: green;
}
在写多种状态时hover要写在后面；
