HTML的浮动与定位
1. 浮动
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
普通文档流：浏览器在默认情况下规定一个块元素在父元素内的排列规则：
-
从上往下排列
-
从左开始排列
-
一个块元素占一行
.parent {width: 800px;height: 400px;border: 10px solid blue;
}
.box1 {width: 250px;height: 80px;background-color: #ed7d31;
}
.box2 {width: 400px;height: 100px;background-color: #70ad47;
}
.box3 {width: 200px;height: 200px;background-color: #7030a0;
}
<div class="parent"><div class="box1"></div><div class="box2"></div><div class="box3"></div> </div>
浮动之后的文档流
.parent {width: 800px;height: 400px;border: 10px solid blue;
}
.box1 {float: left;width: 250px;height: 80px;background-color: #ed7d31;
}
.box2 {width: 400px;height: 100px;background-color: #70ad47;
}
.box3 {width: 200px;height: 200px;background-color: #7030a0;
9.1 浮动元素父级高度塌陷
当父级元素没有设置高度时，高度会由文档流内容撑开。而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。
-
对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
-
在父元素的末尾添加空的块元素。设置clear:both;清除浮动
-
为父元素设置overflow:hidden;解决高度为0
2. 定位
定位postion属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。
不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置。
10.1 relative
相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。
-
不会脱离文档流
-
不影响元素本身的任何特性
-
如果不加方位词偏移那么没有任何影响
10.2 absolute
绝对定位能让元素脱离文档流（原地起飞...），使用方位属性相对于最近的有定位的父级元素进行偏移
方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。
-
脱离文档流
-
元素宽高默认值为0，可以设置宽度高度，可以设置内外边距
-
找不到最近的定位父级则相对于body标签
-
一般配合相对定位使用（参照物）
-
设置了绝对定位,没有设置层级;html后写居上
-
margin:auto 暂时失效
10.3 fixed
固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；
-
脱离文档流
-
元素宽高默认值为0
-
margin:auto失效
10.4 层级
定位元素之间，如果出现覆盖问题，那么越到后面的元素优先级越高，当然我们可以使用z-index层级属性来调整优先级。数值越大，越靠上。
z-index属性只针对定位元素有效
取值为一个整数数字，默认auto 或 0 ，可正可负