这是我参与「第五届青训营 」笔记创作活动的第8天。

CSS浮动

浮动的作用：

1. 可以使块级元素按照设置的浮动在同一行内排列
2. 设置图片浮动，可以形成文字围绕图片的效果
3. 行内元素设置了浮动，可以设置行内元素的宽高

浮动的特点：

使设置了浮动的元素脱离文档流，如果父盒子没有设置高度而是需要子盒子的高度去撑开的话，就会造成父盒子的高度塌陷问题，同时会影响父盒子后面的兄弟盒子的布局

清除浮动的方法：

1. 额外标签法：在浮动元素的末尾添加一个空标签，再为这个空标签设置样式为clear: both。
2. 给父级元素添加overflow: hidden属性，缺点是：无法显示溢出内容。
3. 给父级添加伪元素来去除浮动

CSS定位

定位可以让盒子自由的在某个盒子内部移动位置，并且可以压住其他盒子。定位组成：将盒子定在某一个位置，定位也是在摆盒子，按照定位的方式移动盒子，定位 = 定位模式+边位移

• relative

  1. 元素在移动位置时，是相对于它原来的位置来说的，与父元素无关
  2. 原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

• absolute : 元素在移动时，是相对于它父级元素来说的

  1. 如果没有父级元素或者父级元素没有定位，则以浏览器为准定位
  2. 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置（脱标）

• sticky

  1. 粘性定位占有原先的位置
  2. 必须添加top、left、right、bottom其中一个才有效，不然只能当做相对定位
  3. 跟页面滚动搭配使用，兼容性较差，IE不支持，很少用