【前端学习】前端学习第六天：盒子的浮动和定位详解

一、浮动 float

通过浮动可以使一个元素向其父元素的左侧或右侧移动；

下面来介绍float的这三个属性值：

1、none：默认值，元素不浮动；

2、left：元素向左浮动；

3、right：元素向右浮动。

浮动的特点：

1、元素设置浮动后，水平布局的等式便不需要强制成立；

2、元素设置浮动后，将会从文档流中脱离，此后元素的一些特点也会发生改变。

脱离文档流的特点：

块元素：

1、块元素不再独占页面一行；

2、块元素的高度和宽度默认被内容撑开；

行内元素：

行内元素脱离文档流后会变成块元素，特点和块元素一样。

高端塌陷问题：

在对元素进行浮动后，会出现一个比较常见的问题，就是高度塌陷，其原因是因为，在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，这时子元素会无法撑起父元素的高度，导致父元素高度塌陷；

解决：为父元素设置over:hidden；

原理：为父元素开启了BFC，会使元素变为一个独立的布局（关于BFC的详细介绍，感兴趣的同学可以去网上搜一下）。

除此之外，还可以通过.chearfix的方式，来解决高度塌陷和外边距重叠问题；

二、定位 position

可以通过使用定位指定元素的位置，水平方向可以通过left和right属性，垂直方向可以通过使用top和bottom属性，下面来介绍position的这四个属性值。

1、relative 相对定位

相对定位的参照物是该元素在文档流中的位置，相对定位会提升元素的层级，但不会使元素脱离文档流；

2、absolute 绝对定位

在开启绝对定位后，元素会从文档流中脱离，也就是块元素会变成行内元素，行内元素会变成块元素，绝对定位是相对于其包含块进行定位的。正常情况下，包含块就是离当前元素最近的祖先元素，一般都是父元素；

注意：绝对定位中的包含块就是离它最近的开启定位的祖先元素，也就是绝对定位是相对于离它最近的开启定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则相对于根元素也就是html元素定位的。

3、固定定位 fixed 

固定定位也是一种绝对定位，所以大部分特点和绝对定位一样，唯一不同的是固定定位永远参照浏览器窗口进行定位；视口的特点是固定不动的，所以固定定位也是不会动的。

4、粘性定位 sticky

粘性定位和相对定位的特点基本一致，不同的是粘性定位可以在元素到达某个位置时将其固定，所以一般需要设置一个top值。