1. 浮动 Float
- 定义：是元素的一种属性，设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程，可以让任何盒子在一行排列，用浮动来布局。
- 标准文档流：文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行，并在每行中从左至右的顺序排放元素。造成空白折叠、高矮不齐，底边对齐以及自动换行等现象。
- 格式：选择器 { float：属性值；}
属性值：left——元素向左浮动；right——元素向右浮动；none——元素不浮动（默认值） - 特性：①脱离标准流，不占位置，只有左右浮动；②一浮动就创建一个包含块级的概念，在外边加一个父盒子，再对齐；③若上一个元素浮动则与其在顶部对齐，若上一个元素是标准流则上下排列。
- 块级元素：独占一行 如h1~h6 p div 列表…
行内元素：不独占一行 如span a img strong…
行内元素可以被包含在块级元素中，反之则不可以 - display：block 显示为块元素 / inline 显示为行内元素 / inline-block 显示为块元素，但是可以内联，在一行 / none 元素不会被显示
- 实例演示
2. 父级边框塌陷问题
- clear：清除浮动元素
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 无浮动元素
解决方案：
（1）增加父级元素的高度
（2）增加一个空的div标签，清除浮动
（3）在父级元素中增加一个 overflow: hidden;
（4）父类添加一个伪类：after
- 小结
（1）设置父元素的高度：简单，元素假设有了固定的高度，就会被限制；
（2）浮动元素后面增加空div ：简单，代码中尽量避免空；
（3）overflow：简单，下拉的一些场景避免使用；
（4）父类添加一个伪类：after（推荐）：写法稍微复杂一点，但是没有副作用。
3. 相对定位
- position属性常用值：static——自动定位(默认)；relative——相对定位；absolute——绝对定位；fixed——固定定位
- position: relative;
- 偏移属性：top——顶部偏移量；bottom——底部偏移量；left——左侧偏移量；right——右侧偏移量
- 相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留。
- 实例代码
- 运行结果
4. 绝对定位
- position: absolute
- 定位：基于xxx定位，上下左右(top、bottom、left、right)
(1) 没有父级元素定位的前提下，相对于浏览器定位；
(2) 假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
(3) 在父级元素范围内移动。
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留。 - 实例代码
- 运行结果
5. 固定定位
- position: fixed
- 元素的位置相对于浏览器窗口是固定位置
6. z-index
-
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
z-index--------设置元素的堆叠顺序--------值:number/auto
z-index: 默认是0,最高无限制 -
opacity 透明度的属性值从0.0 - 1.0。值越小，使得元素更加透明。它是针对整个元素的，一旦设置了透明度，则背景色，文字颜色都有透明度。
-
实例代码
-
运行结果
