前端培训日记day07 0712

水平居中

     margin的左右方向可以设置自适应auto，这样他所修饰的块属性标签
    就会在水平方向上自动居中
    注意：auto只能控制水平方向居中，不能控制垂直方向的自动居中

    margin：0 auto；
    
    auto的原理 
    auto 的值=（父元素的宽度-当前的宽度）/2

* {
            margin: auto;
            padding: 0;
        }

浮动

    浮动的原理：设置浮动的元素超出文档流.
    文档流：就是元素从上到下 从左到右的布局顺序

    浮动的作用：从整体出发，把标签元素进行横向布局

    使用inline-block横向布局的弊端：
    1  元素之间有缝隙
    2  低版本浏览器不支持 inline-block

    浮动的特点：
        1  浮动元素超出文档流
        2  块属性标签浮动后，不再独占一行空间，如果不设置宽高，
        则他的宽高由内容撑开
        3  块属性标签浮动后，他的margin属性的auto值失效
        4  行属性标签浮动后，可以设置宽和高，并且支持上下padding和
        上下margin

清浮动

当子级元素进行浮动的时候，他的父元素会产生影响，由于浮动元素脱离文档流，
    父元素没有被子元素撑开，导致父元素没有高度，在布局的时候会产生混乱

    清楚浮动产生的影响（清浮动）
    1  给浮动元素的父级添加overflow：hidden
    2  给父元素设置指定高度，确保布局正确
    3  给父元素添加display:inline-block ,该方法兼容性差
    4  给父元素添加浮动,可能会影响布局
    5  设置一个空标签，在空标签中设置属性
        .clear{
            clear:both;
            /* 防止ie低版本具有默认高度*/
            height:0;
            overflow:hidden;
        }
    6  通过after伪元素清浮动
        .clearfix::after {
        content: '';
        display: block;
        height: 0px;
        overflow: hidden;
        clear: both;

            /* 清浮动方式 */
            /* overflow: hidden; */
            /* height:102px */
            /* display: inline-block; */
            /* float:left; */
            /* 清浮动5 */
        .clear {
            clear: both;
        }

        /* 清浮动6 */
        .clearfix::after {
            content: '';
            display: block;
            height: 0px;
            overflow: hidden;
            clear: both;
        }