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。
