九宫格的几种实现

一，利用flex布局

二，利用浮动

1.父div设置left浮动，这样每个类是c-row的div是竖直向下排列的

    .c-row{
      float:left;
    }
    .square{
        width: 43px;
        height:43px;
        line-height: 43px;
        border:1px solid silver;
        margin-right:-1px;
        margin-top:-1px;
    }

2.每个square左浮动,利用父元素的伪类清除浮动

clear 属性只有块级元素才有效的，而 :after 等伪类及::after伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

  .c-row:after{
        clear:both;
        content:'';
        display:table;
        /*display:block*/
    }
    .square{
        float:left;
        width: 43px;
        height:43px;
        line-height: 43px;
        border:1px solid silver;
        margin-right:-1px;
        margin-top:-1px;
    }