CSS浮动定位

1、浮动
行内元素：span 、img、strong...          行内元素能包括在块级元素内，块级元素不能包括在行内元素内
块元素：h1-h6、p、div……
行内元素块元素转换：display：block；   block块元素、inline行内元素、inline-block是块元素但是可以内联、none消失隐藏
左右浮动：float：right；  right右浮、left左浮
清除浮动：clear：both； both两侧不允许浮动、right右侧不允许浮动、left左侧不允许浮动
小结：display和float都能让元素排在一列，display方向不可控制；float浮动起来会脱离标准文档流，所以需要解决父级边框塌陷问题；

2、父级元素塌陷问题方法：
①增加父级元素高度
②增加一个空的div标签，清除浮动          <div class=“mm"></div>  .mm{clear：both；}
overflow：hidden;  hidden溢出隐藏、scroll溢出加滚动条
③在父级元素加overflow：hidden;
④父类添加一个伪类：after
#父元素标签:after{
        conter:'';
         display:block;
        clear:both;
        }
小结：    浮动元素后面加空div：简单，但是代码中避免空div；
    设置父元素高度：简单，但元素设有固定高度就会被限制；
    overflow：hidden；简单，但下拉的场景避免使用；
    父类元素加一个伪类after，推荐使用，虽然写法稍微复杂，但是没有副作用；

3、定位：position:relative;    relative相对定位、absolute绝对定位、fixed固定定位
相对定位：  相对于原来位置进行指定偏移  ,仍然在标准文档流中，它原来位置会被保留
position:relative;
上top:10px; 
下bottom:10px;
 左left:10px; 
右right:10px;

绝对定位：相对于父级或浏览器的位置，进行指定偏移，不在标准文档流中原来位置不会被保留；
①没有父级元素定位的前提下，相对浏览器位置进行定位；
②父级元素存在定位，通常会相对于父级元素进行偏移；
③在父级范围内移动
position:absolute;

固定定位：固定到浏览器窗口位置；
position:fixed;

图层：z-index:99；     默认是0，最高无限制，相同位置被覆盖元素可以使用图层提高层次
两种背景透明度
opacity:0.5；    0~1所有浏览器支持
filter:alpha(opacity=50);   0~100 IE8及更早版本才支持