浮动（目的让多个块元素一行内显示）
一、CSS布局有三种机制
1.普通流
2.浮动
3.定位
1、普通流（标准流）
1.1.块级元素会独占一行，从上往下排列
1.2.行内元素会按照顺序从左到右排列，碰到父元素边缘自动换行
2、浮动
2.1.概念：元素的浮动是指设置了浮动属性的元素
- 脱离标准普通流的控制
- 移动到指定位置
语法如下：
选择器 {
float：属性值；
}
| 属性值 | 描述 |
|---|---|
| left | 左浮动 |
| right | 浮动 |
2.2 float-浮漏特
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在标准流盒子上面 |
| 漏 | 加了浮的盒子是不占位置的，他原来的位置让给了下面的标准流盒子 |
| 特 | 特别注意：浮动元素会改变display属性，类似转成了行呢快，但是元素之间没有缝隙 |
注意
- 浮动的元素互相贴靠一起的，但是如果父级元素宽度装不下这些浮盒子，多出来的盒子会另起一行对齐
2.3 浮动和标准流的父盒子搭配使用
我们需要给浮动的元素添加一个标准流的父亲，这样最大化的减小了对其他标准流的影响
2.4 浮动的扩展
（1）浮动元素于父盒子的关系
- 子盒子的浮动参照父盒子对齐的
- 不会于父盒子的边框重叠，也不会超过父盒子的内边距
（2）浮动元素于兄弟盒子的关系
在一个父级盒子中，如果当前一个兄弟盒子：
- 浮动的，那么当前这个盒子会于前一个盒子的顶部对齐
- 是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方位置不变。浮动只会影响当前的或是后面的标准流盒子，不会影响前面的标准流盒子。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面标准流
建议：如果一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他兄弟盒子也应该一起浮动，防止引起问题。
二、清除浮动
1.清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后父级就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流盒子了
清除浮动的方法
2.在CSS中，clear属性用于清除浮动
语法如下
选择器{
clear:both;}
both:同时清除左右俩边的浮动
（1）额外标签法（隔墙法）
是通过在浮动末尾添加一个空的标签 例如：
.clear{
clear:both}
<div class="clear"></div>
(2)父级添加overflow属性方法：
overflow:hidden;
(3)使用after伪元素清除浮动 父级调用即可
.clearfix:after{
content:"";
dissplay:block;
height:o:
visibility:hldden;
clear:both;}
.clearfix{
*zoom:l;}
(4)使用双伪元素清除浮动
代码如下
.clearfix:before,
.clearfix:after {
content:"";
display:table;}
.clearfix:after{
clear:both;}
.clearfix{
*zoom:l;}
为什么要清除浮动？我们什么时候用到浮动
1.父级没有高度
2.子盒子浮动了
3.影响下面的布局了。