元素的浮动是指设置了浮动属性的元素会
1、脱离标准普通流的控制
2、移动到指定位置。
在做一些网页布局的时候标准流已经不满足我们的需要了，因此会借助浮动来完成页面布局。比如当需要多个块级元素在一行显示的时候，而display不能满足需求的时候：
或者这样
第一种情况用display实现的时候会发现每个盒子中间有空隙，第二种display根本实现不了，而浮动能很好地解决这种问题。
浮动的语法：
选择器 {
float： 属性值；
}
float属性值：none（默认）、left（左浮动）、right（右浮动）
浮动的口诀：浮 漏 特
浮：设置了浮动的元素漂浮在标准流上面
漏：浮动的盒子把自己的位置让给了下面的盒子，不占原来的位置，脱离了标准流，俗称“脱标”
```html
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
```
特：float属性会改变元素的display属性，类似转换为行内块，但是盒子之间没有缝隙。
div {
width: 200px;
height: 200px;
background-color: pink;
/* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
/* display: inline-block; */
/* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
float: left;
}
.two {
background-color: hotpink;
}
注意：多个块级元素用浮动放在一起，如果父级元素装不下会自动换行
float的扩展：
1、浮动元素与父盒子的关系
自盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
2、浮动元素与兄弟盒子的关系
在父级元素中，如果前一个盒子是
浮动的，那么当前盒子与前一个盒子的顶部对齐；
普通的，那么当前盒子会显示在前一个盒子的下方。
注意：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
清除浮动
在父级盒子很多的情况下，不方便给高度，但是子盒子浮动不占用位置导致父元素的高度为0，就影响了下面的标准流，所以会清除浮动，准确的说是清除浮动造成的影响
清除浮动本质：
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
什么时候用清除浮动：
1、父级没高度
2、子盒子浮动了
3、影响下面布局了，我们就应该清除浮动了。
清除浮动的方法：
1、额外标签法：
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
2、父级元素加overfloat属性
overfloat：hidden/auto/scroll
3、用after伪元素清除浮动
语法格式如下
.clearfix:after {
content: ""; 或content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {*zoom: 1;} /* IE6、7专有*/
4、用双伪元素清除浮动
.clearfix:befor,
.clearfix:after {
content: ""; 或 content: ".";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {*zoom: 1;} /* IE6、7专有*/
