浮动float

让元素按照指定的方向移动（只可以左右），知道容器的边界padding，或者其他浮动边界margin，才会停下

float:left 向左浮动

float：right 向右浮动

float：none 不使用浮动

一般布局可以避开浮动就避开
同一行没有做够的空间，在下面位置浮动，大的容器在同一行进行排序

文本环绕，设置图片浮动，周围文字进行环绕 （不会脱离文本流）

任意标签都可以设置浮动→ 浮动元素  （块元素可以在同一行，行内元素可以设置宽高、盒子模型）浮动会使元素脱离文档流，表现不被元素原先的display限制

脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候会当做脱离文档流不存在进行定位

脱离文档流也会导致以下问题：

1，浮动元素不能撑开容器的高度 （已经脱离的元素，不在普通文档流中当然撑不开）“高度塌陷”

没有设置浮动的时候 设置浮动后

2,，浮动元素会产生层叠，悬停在普通文档流上  （*** 一般不会用浮动来堆叠元素）

没有添加浮动之前两个相邻块元素 添加浮动后的叠加问题

3，会对后续元素产生影响

添加浮动会对后续布局产生影响

总的来说，既然已经脱离了普通文档流，就不再参与常规的布局排版，浮到布局的上层，包裹它的元素和后续的元素都会产生影响

元素设置了float属性后，会影响其相邻的元素，相邻的元素如果想要不被影响需要对其进行清除浮动

浮动元素清除浮动只是清除他上一个元素给他带来的影响，他自身还是浮动元素，清除浮动还是脱离文档流，

清除浮动：

1，父级元素设置height，只适合高度固定的布局

2，给浮动元素的容器添加overflow：hidden （浮动的元素的高度会被算进去 ， 不太灵活）-

zoom：1; (解决IE 6 7 的兼容问题)

3，在浮动元素后使用一个空元素 <div class="clear">  </div>        .clear{clear:both}

设置在块元素上，出现在浮动元素后面，自己不可以有浮动

clear：left  不允许元素的左侧出现浮动元素

         right  不允许元素的右侧出现浮动元素

         both  不允许元素的左侧和右侧出现浮动元素

4添加CSS的::afte伪元素 出现在包裹元素的最后面

 .clearfix::after{

              content:" "；   必须要写， 内容为空

              display：block； 伪元素默认为行内元素，需要转换为块元素执行 clear:both

              clear：both ；  清除浮动，需要设置在块元素上

             /*  height:0 ；    高度为0

                 visibility:hidden ； 显示：隐藏

              */   解决兼容问题

}

.clear{zoom:1；}   (解决IE 6 7 的兼容问题)

伪元素：通过在css设置，在页面中表现为  内联元素 最重要的属性 content：内容 （文本，图片）

a:: after( || before){                before:在元素之前插入内容

    content:....                       after： 在元素之后插入内容 容器的最后

}

伪元素