HTML的浮动与定位

1. 浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。

普通文档流：浏览器在默认情况下规定一个块元素在父元素内的排列规则：

• 从上往下排列

• 从左开始排列

• 一个块元素占一行

.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 ，可正可负