浮动和定位

关于浮动

• 使用场景:需要将大的布局排列成一行，一般使用浮动；对于小的布局排列一般使用inline-block即可；
• 浮动使用后一般需要清除浮动：clear：left/right/both 其中第一个的意思是该元素位置在左侧浮动元素的下方，其top在左侧浮动元素bottom元素的下方。
• 浮动可以通过设置margin来达到偏移的效果。如果需要在一列中实现水平平均布局，可以使用flex布局方式
• 浮动除了直接使用clear以外还可以使用伪元素（应用场景是① 将边框撑满；② 使行内元素在直接下方）具体代码为

 .clearfix:：after{
      display: block;
      content: "";
      clear:both;
} 

• 注意： 类似于该种伪元素可以用来撑开边框，或者使用before 属性在第一个子元素前面再加一个伪元素。伪元素也可以有宽高，也可以有背景色，但是伪元素必须要有 content ，且其值必须为空。

关于定位

• 一般有两种定位方式position：absolute/relative 其中使用 position: absolute 时一般在其父元素上面要设置相对定位，这样可以将定位确定为以父元素为标准。设置为绝对定位之后，若要设置为居中，可以使用left:50%; top:50%, 然后在做一个偏移transform:translate(-50px, -50px),这样就可以实现居中操作。
• 关于相对定位，其标准就是子元素开始的位置，直接在下面设置left: 100px; top: 100px 即可。相对定位其子元素开始的位置没有发生变化，位置依然会被占用。