浮动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： 在元素之后插入内容 容器的最后
}
