浮动与定位

一、浮动

1.浮动的简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是最主流的页面布局方式之一。

2.元素浮动后的特点

1. 脱离文档流。（不好）
2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
3. 不会独占一行，可以与其他元素共用一行。
4. 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 matgin 和 padding 。
5. 不会像行内块元素一样被当作文本处理（没有行内块的空白问题）。

3.浮动后会有哪些影响

        对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之间的位置，在浮动元素的下面；对前面的兄弟无影响。

        对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然拘束浮动的元素。

4. 解决浮动产生的影响（清除浮动）

解决方案：

1. 方案一：给父元素指定高度
2. 方案二：给父元素也设置浮动，带来其他影响、
3. 方案三：给父元素设置 overflow: hidden 。
4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除元素浮动，原理与方案四相同。
6. 布局中的一个原则：设置浮动的时候，兄弟元素要么全部浮动，要么全部不浮动。

5. 浮动小练习

画页面

示例：

二、定位

1.相对定位

1.1 如何设置相对定位？

1. 给元素设置position:relative 即可实现相对定位。
2. 可以使用 left、right、top、bottom 四个属性调整位置。

1.2 相对定位的参考线在在哪里？

1. 相对自己原来的位置

1.3 相对定位的特点

1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认的规则是：
   1. 定位的元素会盖在普通元素之上。
   2. 都发生定位的两个元素，后写的元素会覆盖在先写的元素之上。
3. left 不能和 right 一起设置，top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对定位的元素，也能通过 margin 调整位置，但不推荐这么做。
6. 注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

2.绝对定位

2.1 如何设置绝对定位？

1. 给元素设置 position: absolute 即可实现绝对定位。
2. 可以使用 left、right、top、bottom 四个属性调整位置。

2.2 绝对定位的参考线在哪里？

1. 参考他的包含块
   1. 对于没有脱离文本流的元素，包含块就是父元素；
   2. 对于脱离文本流的元素，包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

2.3 绝对定位元素的特点：

1. 脱离文档流，会对后面的兄弟元素，父元素有影响。
2. left 不能和 right 一起设置，top 和 bottom 不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素，（行内、行内块、块级）设置为绝对定位后，都变成了定位元素。
6. 何为定位元素：默认宽、高都被内容撑开，且能自由设置宽高。

3. 固定定位

3.1 如何设置为固定定位？

1. 给元素设置 position: fixed 即可实现固定定位。
2. 可以使用 left、right、top、bottom 四个属性调整位置。

3.2 固定定位的参考线在哪里？

1. 参考他的视口
2. 什么是视口：对于 PC 浏览器来说， 视口就是我们看到网页的那扇“窗户”。

3.3 固定定位元素的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置，top 和 bottom 不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4. 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为固定元素定位之后，都变成了定位元素。

4.粘性定位

4.1 如何设置粘性定位？

1. 给元素设置 position:sticky 即可实现粘性定位。
2. 可以使用 left、right、top、bottom 四个属性调整位置，不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里？

1. 离他最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

1. 不会脱离文档流，他是一种专门用于窗口滚动时的新的定位方式。
2. 最常用的值时 top 值。
3. 粘性定位和浮动可以同时设置，但不推荐
4. 粘性定位的元素，也能通过 margin 调整位置，但不推荐
5. 粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置是将其固定。

5. 定位层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3. 可以通过css属性 z-index 来调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示的层级越高。
5. 只有定位的元素设置 z-index 才有效。
6. 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

6. 定位的特殊应用

注意：

• 1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，依然可以设置宽高。
  2. 发生相对定位后，元素依然是之前的显示模式。
  3. 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

1. 块宽想与包含块一致，可以给元素同时设置 left 和 right 为 0。
2. 高度想与包含块一致，top 和 bottom 设置为 0.

让定位元素在包含块中居中

1. 方案一：

   1. left:0; 
      right:0; 
      top:0; 
      bottom:0; 
      margin:auto;

2. 方案二：

   1. left: 50%; 
      top: 50%; 
      margin-left: 负的宽度的一半； 
      margin-top: 负的高度一半；

3. 注意：该定位的元素必须设置宽高！