1.盒子

1.1

div{
            width: 200px;
            height: 200px;
            background: red;
            /*
            用 box-sizing: border-box;
            给元素border,padding不会改变它的width,height
             */
            box-sizing: border-box;
            border: 10px solid black;
            border-radius: 10px;
        }

QQ截图20180716194847.png

tips1：border-radius: 10px;用来盒子的角度（圆角）。
tips2：下面代码表示不选中parenr中的（每）div下的最后一个元素。

.parent>div:not(:last-child){
            margin-right: 13.3333px;
        }

2.float

2.1.浮动的原理

/* float的原理：相对于整个页面漂浮起来 */
        .one{
            width:100px;
            height: 100px;
            background:red;
            float: left;

2.2消除浮动

如果父元素不设置高度，子元素float，父元素的高度会坍塌。
因此要消除浮动，父元素会自动读取子元素的高度。
消除浮动的方法有两种，常用的为第二种；
①

overflow:hidden;//给父元素的样式中

②

.parent:after{
            content:"";
            display: table;
            clear: both
        }

这段代码其实就是在float元素后面加上一个空的元素，同时clear。