1、浮动的意义

1.浮动最开始是做图文绕排的。

2.浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右。

2、浮动的的特性：

(1)、浮动的元素不占有标准流的位置

(2)、不会继承父元素的宽度而是有多大就撑多大

(3)、可以直接写宽高无论前生是块级还是行内元素

(4)、margin:0 auto;对于脱标元素没有用

3、当元素浮动了之后会脱离普通的文档流，那么当父留

级元素么有设有高度的时候那么，此时父级元素的高就变成了0怎么样去解决这个bug呢？？

有以下的四种方法

第一种：

（1）、给父级元素高加一个固定的高度（不推荐，不利于后期维护）

（2）、额外标签法，创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）

（3）、用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）

那么代码是：

.clearfix::after{

content=" ";

clear:both;

display:block;

hieght:0;

visibility:hidden;

}

.clearfix{ *zoom:1;}

或者

.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}

/* 为了兼容IE6,7 */.clearfix{ *zoom:1;}

伪元素的特性

1、伪元素由css渲染 所以不会增加你的DOM（html结构）开销

2、伪元素默认是行内元素 可以进行转块等处理

3、伪元素不管有没有内容 content这个值一定不能少 即使没有 也要写个空

4、伪元素 官方推荐写:: 但是为了兼容考虑 写成单冒号

5、因为伪元素是css渲染 所以JS获取不到