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