1、盒子模型
1.1、 box-sizing: border-box;
div{
width: 200px;
height: 200px;
background: red;
box-sizing: border-box;
border: 15px solid black;
padding: 20px;
}
box-sizing:border-box , 给元素border；padding不会改变它的width，height
2、float
2.1、float的原理：相对于整个页面漂浮起来
.one{
width: 100px;
height: 100px;
background: red;
float: right;
}
2.2、清除float clear: both;清除float 使不受float的影响
.two{
clear: both;/*清除float 使不受float的影响*/
width: 200px;
height: 200px;
background: blue;
}
2.3、flaot和父元素 父元素不设置高度，子元素float，父元素的高度会坍塌
.parent{
width: 400px;
/* overflow: hidden;*/
background: red;
}
.child{
width:200px;
height: 200px;
background: green;
float: left;
}
.row:after{
content:"";
display: table;
clear: both;
}
如何让父元素获取高度
1.overflow：hidden
2.在float后面加清除clean:both;
3.给父元素公共样式
.row:after{
content:"";
clear:both;
display:table;
}
