3.标准流浮动和定位

1.HTML中的3种布局方式

1.1 标准流

从左到右，从上到下显示。要让一个元素不在正常流中，唯一的办法是让元素浮动或定位。

1.2 浮动

1. 只要是脱离了标准流，元素都是不区分行、块的，体现在任何元素都可以设置宽、高了。都有了
 收缩的 性质，就是不设置宽度，就自动缩减为里面内容的宽度，没有宽度时默认内容撑开宽度；
2.脱离文档流
3.浮动的边界不会超过父元素，下一个浮动不会超过
4.提升层级半级。
5.浮动的元素有贴边的性质，绝对定位的元素可以自由定位。

• 对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。
• 对普通元素的影响：浮动元素会从文档正常流中删除，使得紧挨它的元素位置发生偏移，影响布局。
• 对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。

1.3 定位

CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）inherit

• static
  没有定位，元素在正常流中,top,right,bottom,left和z-index属性无效。
• relative

1. 将元素position属性设置为relative之后，再通过top,bottom,left,right属性对其进行相对于原来位置的偏移；

2.元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；

3.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别

• absolute生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。

1. 绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；

2. 绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；

3. 绝对定位的框可以覆盖页面的其他元素。

• fixed
  本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。

absolute, relative, fixed偏移的参考点分别是什么？

• absolute偏移的参考点是：最近的是relative或者absolute的父试图进行定位。

• relative偏移的参考点是：相对于元素在普通流中的原来位置，正常流中位置依旧存在，根据最近的父试图进行定位。

• fixed偏移的参考点是：相对于浏览器窗口，正常流中不存在，需要注意的是在移动端开发的时候尽量不要使用这个，因为在切换界面的时候会导致元素的抖动。

relative下，top和margin-top的区别
https://blog.csdn.net/lxiang222/article/details/70340084
https://www.jianshu.com/p/4a1f36e9ca32