html学习日记day07（水平居中，浮动，清浮动）

day07

01水平居中

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

margin:0 auto;

auto的原理

auto的值 = （父元素的宽度-当前元素的宽度）/2

02浮动

浮动的原理：设置浮动的元素超出文档流

float: left;
float: right;

文档流：就是元素从上到下，从左到右的布局顺序

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

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

浮动的特点：

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

03清浮动

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

清除浮动产生的影响(清浮动)

    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: 0;
            overflow: hidden;
            clear: both;
        }