定位

1、分类

1.普通流定位
2.浮动
3.相对定位
4.绝对定位
5.固定定位

2、普通流定位（默认文档流定位）

1.每个元素在页面上都有自己的空间（算法：盒子模型）
2.每个元素都是从父元素的左上角开始渲染
3.行内元素和行内块元素在同一行显示，从左往右，一行放不下，折行
4.块级元素独占一行，从上往下排列

3、浮动定位

让块级元素横向显示
float：
取值：
1.left左浮动，让元素浮动后停靠在父元素的左边，
或者其他已浮动元素的后面
2.right右浮动，让元素浮动后停靠在父元素的右边，
或者其他已浮动元素的后面
3.none默认值，不浮动

4、浮动定位引发的特殊情况

①浮动元素的占位问题
当父元素一行显示不下所有浮动元素时，最后显示不下会换行，默认去距离当前行最近的一行。
但是，已浮动元素会根据自己的浮动方向占位置，导致被挤下去的元素，会躲开被占据的位置，在更下方显示
②元素一旦浮动，如果元素没有定义宽度，那么元素浮动之后，元素的宽度靠内容撑开
③元素一旦脱离文档流，会变成块级元素，尺寸，垂直外边距都生效
④文本行内元素，行内块元素，不会被任何浮动元素压在后面的，而是，巧妙的避开，环绕着浮动元素显示

5、脱离文档流意味着什么

1.不占页面空间
2.后续元素上前补位
3.变成块级元素

6、清除浮动效果（清除浮动）

前面的浮动元素脱离文档流，需要我上前补位
设置了清除浮动之后，我就不上前补位
clear：
取值：
1.none 不清除浮动
2.right 清除之前右浮动元素对我的影响
3.left 清除之前左浮动元素对我的影响
4.both 清除左右浮动给我带来的影响

7.浮动引起的问题–高度坍塌

父元素如果不设置高度，高度默认是内部撑起来的
如果内部所有元素都浮动了，那么父元素认为内部就没有内容了，所以高度为0
解决方案：
1.给父元素设置高度，弊端，很多时候不知道确切的高度
2.父元素也浮动。弊端，父元素的兄弟元素会受到影响
正确的解决方案：
在最后一个子元素的后面追加一个空的块级元素
给这个元素设置清除浮动clear：both；
那么这个元素停留在文档流中，父元素会找到他，这个元素不会被前面的浮动覆盖（clear：both）
这个元素不写宽高，没有内容，那么默认宽度为父级元素的100%，高度为0，不影响父级高度