浮动
介绍：
-
其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题
-
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流
特点：
-
哪个元素设置浮动，哪个元素就会脱离文档流
-
如果给上边的元素设置浮动时，下边的元素就会跑到上边元素的位置上，上边元素会覆盖住下边的元素（原因是上面的元素已经脱离了文档流，不占据位置）
-
脱离文档流的元素，默认在父元素的顶部，不会超出父元素的内容
-
脱离文档流的元素不再区分块和行内，统一会变成行内块
-
无论浮动的元素是右还是左浮动，下面的元素都会默认朝左上角
-
如果父元素设置了padding,那么浮动的子元素不会超出padding以外
-
元素浮动主要就是为了元素之间在一行排列（页面布局问题）
-
浮动的元素并不是根据上下排列的顺序来设置左右浮动，每个元素可以任意设置浮动位置
-
如果上下元素都浮动了，他们就会按照顺序进行排列
-
如果上边有元素未设置浮动，下边设置浮动的元素会被挡住
清除浮动
clear属性
清除浮动，指定段落的左侧或右侧不允许浮动的元素
| 属性 | 描述 |
|---|---|
| right | 清除向右浮动的元素 |
| left | 清除向左浮动的元素 |
| both | 清除左右浮动的元素 |
方法一：额外标签法（w3c提出，不推荐）
是给最后一个浮动的元素后面添加一个空标签,给空标签设置clear属性清除浮动
原理：
额外标签法主要就是调整额外标签的自身，通过调整自身来使自己不要和浮动元素排列在一起。
缺点：
如果页面中出现很多的浮动，就需要添加很多空标签清除浮动，就会导致很繁琐，所以不推荐
方法二：给父元素添加overflow属性（不推荐）
给父元素添加overflow属性非visible属性值（auto、scroll、hidden）
缺点：
如果子元素内容过多会出现隐藏问题，或者页面布局发生改变，不常用此属性
方法三：给父元素设置after伪元素
伪元素创建的元素是行内元素
其实原理和额外标签法类似
/*只写一个冒号是为了兼容其他浏览器不支持::*/ .clearfix:after {/*伪元素创建的元素是行内元素*//*content值要加一个小点，为了防止低版本浏览器解析时出现空隙问题*/content: ".";/* 转化为块元素*/display: block;height: 0;/*隐藏content里面的小点*/visibility: hidden;/*清除浮动*/clear: both;}/*以下是为低版本浏览器做的适配*/.clearfix {*zoom: 1;/* 星号代表了只有ie6和ie7才会解析这段代码，zoom是ie6和ie7的清除浮动方法 */}方法四：给父元素添加双伪元素after before （推荐）
.clearfix:before,.clearfix:after {content: "";display: table;/*触发BFC*/clear: both;}BFC
页面元素中的隐含属性：
Block Formatting Context即块格式化上下文，简称BFC当开启元素的
BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素
BFC理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。
开启BFC后，元素将会具有如下的特性：
-
父元素的垂直外边距不会和子元素重叠
-
开启
BFC的元素不会被浮动元素所覆盖 -
开启
BFC的元素可以包含浮动的子元素（可解决高度塌陷）
如何开启元素的BFC：
-
设置元素浮动（不推荐）
-
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
-
而且使用这种方式也会导致下边的元素上移，不能解决问题
-
-
设置元素为
inline-block（不推荐）-
可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
-
-
将元素的overflow设置为一个非visible的值 （推荐）
-
scroll、auto、hidden
-
-
设置元素绝对定位
-
元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失
-
而且使用这种方式也会导致下边的元素上移，不能解决问题
-
推荐方式：将
overflow设置为hidden是副作用最小的开启BFC的方式
