浮动和定位
浮动就是float，float 属性定义元素在哪个方向浮动。浮动float最开始出现的意义是为了让文字环绕图片而已，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float后面常跟3个属性值left、right、none
float:none 不使用浮动
float:left 靠左浮动
float:right 靠右浮动
使用浮动的时候会有缺陷，它的缺陷是：
1、多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。
2、若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。
3、若浮动元素前面还有同级元素没有浮动则会影响页面结构。
这个时候就要清除浮动，清除浮动只是清除样式浮动起来后的影响。清楚浮动的方法有很多种：
1、父级div定义伪类：after和zoom
2.在结尾处添加空div标签clear:both
3.父级div定义height
4.父级div定义overflow:hidden
5.父级div定义overflow:auto
6.父级div也一起浮动
7.父级div定义display:table
8、结尾处加br标签clear:both
其中我推荐使用伪元素，使用after，添加一个类clearfix。
在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。
该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题（现在我们大多使用高级浏览器，所以这个问题不大）
<div class="box clearfix"> <div class="div">a</div> <div class="div">a</div> </div>
.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after {
content:"";
display:table; /*用这个方法可以避免浏览器兼容问题*/
clear:both;
}
定位就是position，它有七个类型：
1、相对定位--relative：它是属于半脱离文档流，是按照自己原来的位置来进行定位的。它是不会改变元素的类型的，最主要的作用是作为绝对定位的父级元素。
2、绝对定位--absolute：它是属于完全脱离文档流，是根据父级元素来进行定位，如果没有父级元素就按照<body>来进行定位，它会改变元素的类型。
3、固定定位--fixed：它是属于完全脱离文档流,是按照可视区定位，会改变元素类型，多作用于网页上的小广告，弹窗等等。
下面是不常用的
4、默认值--static：没有定位，元素出现在正常的流中。
5、粘性定位--sticky：它的定位基于用户滚动的位置，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位 置。要注意的是Edge 15 及更早 IE 版本不支持 sticky 定位。
6、inherit：它会从父级元素继承position的值
7、initial：它会设置该属性为默认
这里我们要注意一点:定位不要用来布局；定位是有层级的，不调整层级会出现后面覆盖前面。调整层级用z-index，z-index后面值越大层级越高 ，0就是普通定位层级， -1的层级连普通元素都不如。
2019-03-31
