9、浮动影响、溢出属性、定位等

1、清除浮动带来的影响
2、溢出属性
3、定位
4、脱离文档流
5、z-index
6、透明度
7、简易版本博客首页
1、清除浮动带来的影响

浮动的元素会造成父标签的塌陷
解决塌陷的推导步骤
    1、自己写一个标签强行撑起一个高度
    2、clear属性
        clear:left\right\both
    3、统一解决方式  提前定义好后续直接使用
    .clearfix:after {
        content:" ";
        display:block
        clear:both;
    }
    谁塌陷就给谁加上clearfix类属性

2、溢出属性

标签内部的内容超出了自身的标签范围会造成内容的溢出
overflow:hidden/scroll/auto/visible
#圆形头像制作
overflow:hidden
img {
    max-width:100%;
}

3、定位

静态 static
    默认所有的标签都是静态的 无法改变位置
相对定位 relative
    相对于标签自身原来的位置
    如果将标签的position由static变成relative，那么标签就会由没有定位过的标签
    变成已经定位过的标签 性质就改变了
绝对定位 absolute
    相对于已经对位过的父标签  如果没有则参照body作为参照
固定定位 fixed
    固定在浏览器的某个位置 回到顶部、右侧小广告
    相对于浏览器窗口做定位
left、top、right、bottom

4、脱离文档流

脱离文档流
    1、浮动
    2、绝对定位
    3、固定定位
不脱离文当流
    1、相对定位

5、z-index

z-index
    用来调节指向人的z轴距离
eg：百度你登录页面 三层结构    模态框
    1、底部正常文本内容
    2、黑色的布
    3、白色的登录界面
z-index:999

6、透明度
opacity 颜色和字体均可改变

7、简易版本博客园首页

先用div划定区域
    再用HTML先占位
    最后调节样式
        1、在给标签起id或者class属性的时候 应该见名知意
    css单独开设文件书写
        1、上来先用注释表名用途 以及作用区域
        /*这是一个博客园首页的样式*/

        /*通用样式*/
        body {
            margin:0;
        }
        a {
            text-decoration:none
        }
        ul {
            list-style-type:none;
            padding-left:0;
        }
        /*左侧样式*/

        /*右侧样式*/