Display和浮动

display

<!--
block块元素
inline 行内元素
inline-block 是块元素但是可以内联
none 消失
-->
<style>
    div{

        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
        margin-top: 0px;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
不可控方向


浮动

<!--float  浮动-->左右浮动

可控方向，但是浮动起来会脱离标准文档流，需要解决父级边框塌陷问题

父级边框塌陷问题

clear:right 左侧不允许有浮动元素
clear:both 两侧不允许有浮动

解决方案
1；增加父级元素高度
2；增加一个空的div自定义一个class，然后清除两边浮动
clear both
3；overflow  滑动条解决父级元素溢出问题
4；在父类添加一个伪类：after 让空文本变成块元素，清除两边浮动

定位
1；相对定位
position : relative  (相对定位)
相对自己原位置制定偏移
仍然在标准文档流中没有浮出去

2；绝对定位

position :absolute

：没有父级元素定位下，相对浏览器定位
：假设父级元素存在定位，我们会相对于父级元素进行偏移
：在父级元素范围内移动（相对于父级元素汇总浏览器位置，进行制定的偏移，
绝对定位的话，它不在在标准流文档中，原来的位置不会被保留）


3；固定定位

position：fixed

4；z-index
默认是0

z-index=1.（第一层）

层数
tipBg{
background:
opacity:0.5:(背景透明度)
}